CODEWITHSUNDEEP
csscss-selectors
Codecraft
Codecraft

Reputation: 8296

CSS3 to get the last <li> from the top level list in a nested <ul>

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?

Upvotes: 3

Views: 4906

Answers (2)

user192230
user192230

Reputation: 

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

This means select the first level of li and get the first level of links in the last li element. You don't need the last > a unless you have nested links too.

This works for me:

<style>
    .container > ul:first-of-type > li:last-child a {
        background:red;
    }
</style>
<div class="container">
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
      <li><a href="">Last Nested Item</a></li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li><a href="blah">Last Item</a></li>
</ul>
<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><a href="blah">Last Item</a></li>
</ul>
</div>

Upvotes: 0

BoltClock
BoltClock

Reputation: 723668

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

Upvotes: 9

Related Questions