Question

I’ve a nested list:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
       <li>Last Nested Item</li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Last Item</li>
</ul>

I just wanted to get at the very last LI ‘last item’ using a CSS3 selector, its nothing major, just to put some rounded borders on the hover to stop it spilling out of a container, so no back-compatibility is needed (since the borders on the container won’t be rounded on non CSS3 browsers anyway).

I can’t seem to get at it without selecting the last <li> in the nested list as well. I am trying (amongst other things)

.container ul:first-of-type li:last-child a

To me, the above is very definitely saying “get the link in the last LI in the first UL” but apparently, Firefox thinks differently…. (so does IE and Chrome, so it must be me….)

Can anyone see where I’m going wrong?

Answer 1

It says to get the link in the last li in the first ul in any nesting level, which is why you’re getting the item in the nested list as well.

To prevent this, use child selectors to limit only to the immediately-nested list items, instead of descendant selectors which disregard nesting levels:

.container > ul:first-of-type > li:last-child > a