CODEWITHSUNDEEP
csscss-selectors
Nicole
Nicole

Reputation: 33189

Is it possible to target elements based on sibling ancestors?

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:

enter image description here

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/

Upvotes: 3

Views: 1156

Answers (1)

wentz
wentz

Reputation: 700

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/

Upvotes: 1

Related Questions