Is it possible to target elements based on sibling ancestors? - css

Question

I would like to use CSS to target an element that is a "cousin" of a specific element — in other words, where they are both descendants of sibling elements.
I can target an element based on its "uncle" or a sibling of an ancestor, like this:
HTML:
<div>
<h2 data-section="name">Name</h2>
<p class="hint">Full name of the employee</p>
<p>
<span class="value1">Joe Tester</span>
</p>
</div>
<div>
<h2 data-section="details">Occupation</h2>
<p class="hint">Job role or title</p>
<p>
<span class="value1">Software Engineer</span>
</p>
</div>
CSS:
/*
* element that
* has a class of value1
* and is a descendent of a p
* that is next to an h2
* with attribute data-section=name
*/
h2[data-section="name"]~p .value1 {
color: #F92759;
}
Result:
But what if the data-section="name" element is wrapped in another element? Is it still possible to make the following HTML the same as the image above?
<div>
<div>
<h2 data-section="name">Name</h2>
</div>
<p class="hint">Full name of the employee</p>
<p>
<span class="value2">Joe Tester</span>
</p>
</div>
The practical application: Targeting a node in a page (inside body tag) that has a particular meta element.
Example JSFiddle here: http://jsfiddle.net/nchaves/tefpY/

Answer 1

There isn't a css-only solution for this. You can, however, accomplish this using jQuery:
<script>
$("[data-section='name']").parent().parent().addClass('myclass');
</script>
<style>
.myclass .value2 { color: #F92759; }
</style>
JS Fiddle here: http://jsfiddle.net/tefpY/1/