0

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.

jake thunder
  • 21
  • 5
  • There is no parent selector in CSS, so it's not possible to select elements depending on it's content. You have to use JavaScript to achieve that. – MarcinJuraszek Apr 01 '14 at 03:08

1 Answers1

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.

Community
  • 1
  • 1
BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • Even if it were possible to use the level 4 subject selector (described in the link and **as yet unimplemented**) to match the element you're looking for, e.g. `:nth-last-match(1 of .x! > .y) > .y`, the fast CSS profile doesn't allow either the subject selector or `:nth-last-match()` to be used this way anyway, so you'd still have to rely on JavaScript even once it's implemented. – BoltClock Apr 01 '14 at 03:17