CODEWITHSUNDEEP
css
Medha
Medha

Reputation: 33

css - define styling for siblings child element

I am trying to define styling for second sibling's child element based of first sibling's class.

Here is an example of what I am trying to achieve

<div >
      <div class="one">
          <div class="find edit">
              Find me
          </div>
      </div>
      <div class="two">
          <div class="change">
              Change me
          </div>
      </div>
</div>

In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?

Help much appreciated.

Thanks, Medha

Upvotes: 3

Views: 553

Answers (3)

Meligy
Meligy

Reputation: 36594

Update:

Now I notice the edit class required in the child. You cannot.

simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.

More here:

CSS selector for "foo that contains bar"?

.

Original:

Depending on which browsers you care about, this may work:

div.one + div.two > div.change {
    color: green;
}

Reference:

http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

Live Example:

http://jsfiddle.net/Meligy/NVjq6/

Upvotes: 1

Daryl Ginn
Daryl Ginn

Reputation: 1424

As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:

HTML

<div>
  <div class="one edit">
    <div class="find">
      Find me
    </div>
  </div>
  <div class="two">
    <div class="change">
      Change me
    </div>
  </div>
</div>

CSS

.one.edit + .two .change { color: green; }

If not, you could easily accomplish what you're after with a little JavaScript.

Upvotes: 2

WooCaSh
WooCaSh

Reputation: 5212

Here You can find answer:

Complex CSS selector for parent of active child

Short answer copied from link:

Selectors are unable to ascend

CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

Upvotes: 1

Related Questions