How to select last list item using CSS

Posted in: CSS No Comments

Sometimes we need to select only last item in a list. with CSS you can easily select only the last item and apply special CSS styling.

Suppose we have following list:

<ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Clients</a></li>
	<li><a href="#">Contact Us</a></li>

And now we want to apply some special CSS stylying to last item i.e to:

<li><a href="#">Contact Us</a></li>

with CSS you can do like this:

ul.nav li:last-child {
// your css declarations
Please note, some old browsers like IE7 may not support it, but who cares about old browsers!!!

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply