css

Question

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

possible duplicate of [Complex CSS selector for parent of active child](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child) — Fabrício Matté, Feb 15 '13 at 01:52
Also [Is there a CSS parent selector?](http://stackoverflow.com/q/1014861/1331430) — Fabrício Matté, Feb 15 '13 at 01:54

Daryl Ginn · Answer 1 · 2013-02-15T02:00:50.360

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>

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

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

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

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/

edited May 23 '17 at 11:56

Community

1
1

answered Feb 15 '13 at 01:41

Meligy

35,654
11
85
109

2

But that doesn't answer the question as he's looking for a selector that depends on the presence of `.edit` – steveax Feb 15 '13 at 01:45
2

Yep. Not possible now. The upcoming [subject selector](http://dev.w3.org/csswg/selectors4/#subject) may make that possible, but as you say, that's still a ways off. – steveax Feb 15 '13 at 01:52

score 1 · Accepted Answer · edited May 23 '17 at 12:18

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.

css - define styling for siblings child element

3 Answers3

HTML

CSS