CSS :nth-child(n) selector example

by: Jason Huber - November 16th, 2011 Add Comment

The :nth-child(n) selector matches elements on the basis of their positions within a parent element’s list of child elements. The :nth-child accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b.

It is not supported in Internet Explorer 8 (or older) at all. Supporting browsers:

:nth-child(n) browsers support

Here is quick example to create different color links in a unordered list element. This example as a fall back for IE8 and less browsers that do not support :nth-child selector (see the code below).

nth-child example in supporting browsers

nth-child in non supporting browsers IE8 or less

DEMO Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>pseudo-class nth-child example</title>
<style>
<!-- set-up list styles and fall back for IE8 and older browsers ->
a {text-decoration:none; color: #FFF;}
ul {list-style:none;}
li a{padding: 3px;
margin: 5px;
display: block;
width: 200px;
background: #00F}
li a:hover{background: #000;}

<!--  these styles will work in modern browsers  -->
li:nth-child(1) a{background:#00F;}
li:nth-child(2) a{background:#F00;}
li:nth-child(3) a{background:#909;}
li:nth-child(4) a{background:#F30;}
li:nth-child(5) a{background:#090;}
li:nth-child(6) a{background:#369;}
li:nth-child(n) a:hover{background:#000000;}
</style>
</head>
<body>
<ul>
<li><a href="..">example link</a></li>
<li><a href="..">example link</a></li>
<li><a href="..">example link</a></li>
<li><a href="..">example link</a></li>
<li><a href="..">example link</a></li>
<li><a href="..">example link</a></li>
</ul>
</body>
</html>

You can find more information on the :nth-child selectors at:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/