What's the best way to select last element of a parent element that has a child of some type?

Question

I'd like to select last element of a parent Z that has a child element Y of some type in pure CSS?

As in: http://jsfiddle.net/c26rt/6/

I'd like to be able to select the gray square regardless of the number div.x's I might have in pure CSS.

So given:

<div class="z">
    <div class="x"><div class="y"></div></div>
    <div class="x"><div class="y"></div></div>
    <div class="x"><div class="y"></div></div>  
    <div class="x"><div class="y"></div></div>
    <div class="x"><div class="y"></div></div>
    <div class="x"><div class="y"></div>selected</div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
</div>

I want the background-color of the last div.y above be gray.

Answer 1

Since there is no parent selector, you won't be able to do this with pure CSS. Even if you gave all the .x elements that have .y children an additional class name, you would still be unable to select the last among those elements, because there is no last-of-class selector.

You'd have to programmatically find the last .x containing a .y to add an extra class name for you to select in CSS.