css - define styling for siblings child element

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

Answer 1

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.

Answer 2

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.