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!