Css - style definition for siblings child
I am trying to define a style for a second sibling child based on the first sibling 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 "Edit Me" to be green if the "edit" class is found. Is it possible to achieve this purely based on css?
Help rate.
Thanks, Medha
source to share
You can find the answer here:
Complex CSS selector for the parent of the active child
The short answer is copied from the link:
Selectors can't go up
CSS does not offer a choice of parent or ancestor of an element that meets certain criteria. A more advanced selector scheme (such as XPath) will allow for more complex style sheets. However, the main reasons the CSS Working Group rejected the proposals for the parent selector are related to browser performance and incremental rendering issues.
source to share
As far as I know, it is not possible to access the parent selector (I wish there was one). If you could consider this structure, it won't be a problem:
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 can easily accomplish what you need with a little JavaScript.
source to share
Update:
Now I notice the class edit
required for this child. You can not.
you just need something like a selector parent
, and that doesn't exist in CSS 3, however it suggested in CSS 4, but it's nowhere near that soon.
More details here:
A CSS selector for "foo" containing the string "
...
Original:
Depending on which browsers you're interested in, this might work:
div.one + div.two > div.change {
color: green;
}
Link:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live example:
source to share