Question

I’m currently working on a navigation menu that has circles after each menu item, except for the last one. I’m using :after to create and position the circle. I’m trying to get the last list item with either :nth-child or :nth-of-type, but nothing seems to be targeting correctly. I can target the LI of the navigation item, but then I cannot target the a:after to hide the circle.

Here is a fiddle using :nth-of-type(4): http://jsfiddle.net/EgBhE/ – does nothing
as well as a fiddle using nth-last-child(1): http://jsfiddle.net/EgBhE/1/ – hides all circles

I’m not picky on using these 2 selectors; if there is one that I’m not using but it would work, please, let me know.

Answer 1

nav li:last-child a:after { display:none; }

That works. Basically you need to rethink it. You can’t grab "last of" based on the anchor elements because they are all last (and first for that matter) children… of the <li>s. thus you need to base it on the last li.

Demo