Why isn’t css li:last working

css last-child

Are you having a little trouble reaching the last element with :last in your css?

In this post, I am going to show you how to reach the last anchor with css in your navigation.

As usual I will keep it this post short and sweet.

I will show you a couple wrong ways to target your last anchor in a navigation that usually leaves a lot of beginners frustrated.

The goal for the code below would be to select the last anchor only to your navigation and change the color to orange.

 

The .navbar-nav is a bootstrap element which will target the navigation.

Immediately following will be a child selector >

Following your child selector will be the child of your .navbar-nav which is a li. Now you don’t want to reach all children of the .navbar-nav, only the last li child.

This is where the :last-child comes into play. But remember, your goal is to reach the anchor and not the li. So immediately following the :last-child will be another child selector > which follows with an a (anchor).

Now wasn’t that just a bunch of fun!

 

I am a skilled and experienced consultant specializing in WordPress website development and marketing committed to making your business/company more successful by offering you a personal service with honesty and integrity.

Posted in css

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*