Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Can you help me select what I need with :nth-last-child() or :nth-of-type?

Can you help me select what I need with :nth-last-child() or :nth-of-type?

Problem

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.

Problem courtesy of: motoxer4533

Solution

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

  • s. thus you need to base it on the last li.

    Demo

    Solution courtesy of: Joseph Marikle
  • Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Can you help me select what I need with :nth-last-child() or :nth-of-type?

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×