nth-child Selector CSS3 Demos | Grains of Sand - CSS & HTML5 Demos & Templates

CSS3 Demos - nth-child

The nth-child selector lets you add a seperate style to nth child elements of a parent element. The nth element of the parent can be defined as a number, keyword or formula.

Syntax

:nth-child(# | #n ± # | odd | even) {declaration}
# is a number
n starts at 0 and increases by 1 each time it's applied (eg 3n+3 would give -- 1st time applied: (3x0+3=3), 2nd time applied: (3x1+3=6), 3rd time applied: (3x2+3=9), fourth time applied (3x3+3=12) etc...

Usage

li:nth-child(odd) {color:#000;} style each odd item in a list
li:nth-child(3n+3) {color:#000;} styles every third item in a list
li:nth-child(8) {color:#000;} styles the eigth item in a list

Example and Code

In this example each odd list item is purple, each even item is green, apart from the 6th which is yellow with a larger left margin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum. Integer feugiat lacinia nunc, sit amet iaculis nibh vulputate at.
Vivamus rutrum iaculis nunc. In lobortis eleifend blandit. Phasellus odio orci, posuere quis mattis eget, ullamcorper id ligula
Integer dui nunc, accumsan eget fermentum quis, volutpat a est. Curabitur vel tellus velit.
Fusce mi dui, iaculis et ultrices vitae, condimentum non eros. Fusce tincidunt rutrum sapien ac condimentum. Suspendisse potenti.
Proin in risus dui, eu tincidunt lectus. Etiam gravida nibh sit amet ante auctor aliquet. Integer a orci magna. In mattis mattis ligula at auctor.
Cras vitae purus tellus. Nulla at sem id nisl fringilla tempus. Donec a diam ipsum, a adipiscing libero. Vestibulum venenatis nibh quis massa lacinia eu ornare quam varius.
In mattis mattis ligula at auctor. Aenean id nisi leo, quis facilisis urna. Mauris sit amet molestie nisi. Duis velit dui, luctus in lobortis vel, pellentesque ac lectus.
Vivamus viverra metus vel ante sollicitudin et dapibus urna posuere. In a erat ante, vitae dignissim nisi. Maecenas sodales, lectus posuere accumsan vulputate, diam neque viverra neque, et volutpat dolor nisi ac libero.

HTML

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum. Integer feugiat lacinia nunc, sit amet iaculis nibh vulputate at.</li>
<li>Vivamus rutrum iaculis nunc. In lobortis eleifend blandit. Phasellus odio orci, posuere quis mattis eget, ullamcorper id ligula</li>
<li>Integer dui nunc, accumsan eget fermentum quis, volutpat a est. Curabitur vel tellus velit.</li>
<li>Fusce mi dui, iaculis et ultrices vitae, condimentum non eros. Fusce tincidunt rutrum sapien ac condimentum. Suspendisse potenti.</li>
<li>Proin in risus dui, eu tincidunt lectus. Etiam gravida nibh sit amet ante auctor aliquet. Integer a orci magna. In mattis mattis ligula at auctor.</li>
<li>Cras vitae purus tellus. Nulla at sem id nisl fringilla tempus. Donec a diam ipsum, a adipiscing libero. Vestibulum venenatis nibh quis massa lacinia eu ornare quam varius.</li>
<li>In mattis mattis ligula at auctor. Aenean id nisi leo, quis facilisis urna. Mauris sit amet molestie nisi. Duis velit dui, luctus in lobortis vel, pellentesque ac lectus.</li>
<li>Vivamus viverra metus vel ante sollicitudin et dapibus urna posuere. In a erat ante, vitae dignissim nisi. Maecenas sodales, lectus posuere accumsan vulputate, diam neque viverra neque, et volutpat dolor nisi ac libero.</li>
</ul>

CSS

/*First the basic styling for all the list items*/
li{
margin-left: 20px;
list-style-type: decimal;
font-size: 0.9em;
color: #d5bffa;
}
/*Now style the even items in the list*/
li:nth-child(even){
color: #caf6d0;
}
/*And then style the 6th list item*/
li:nth-child(6){
margin-left: 40px;
color: #f9e97b;
}
/*Note on IE8 -- as it doesn't support nth-child, you have to use Adjacent Sibling (http://reference.sitepoint.com/css/adjacentsiblingselector) instead. While this has the same effect, it's far more long-winded, as you can see with the styling of the 6th and 8th items here */
li + li +li +li +li +li{ color: #f9e97b; margin-left: 40px;}
li + li +li +li +li +li+li+li { color: #caf6d0; }

Browser Support and prefixes

Support

nth-child is supported by all the latest browsers.
It isn't supported by Internet Explorer 8 or earlier, but you can use Adjacent Sibbling in IE8 instead. This requires styling each item seperately, for example the 8th items in the above example is styled for IE8 as follows
#nthchild li + li + li + li + li + li + li + li {color: #000; }

Prefixes

There are no browser prefixes