Description »

Styles specified child or children of a particular element.

Details »

In short, the :nth-child() pseudo-class selects a specified child or specified children of a particular element. For instance, if you had an unordered list with a bunch of <li> elements in it, using this pseudo-class you can select specific <li> elements and style them.

You specify which child using the parentheses. For instance, ul li:nth-child(5) will select the 5th <li> element of the <ul> block.

You can also select a pattern of elements using the value in the parentheses. You can provide a formula that selects any element that fits the formula:

  • :nth-child(an+b)

In words, this selects every ath element starting at b. If I used ul li:nth-child(2n+1), every second element starting at the first one will be styled.

You can also specify two keywords: odd and even. Using odd will style every odd-numbered element (1st, 3rd, etc.), whereas using even will style every even-numbered element.

Examples »

The table below is styled so that every third element starting with the second is given a reddish background. Also, every second element starting with the third is given a red text color.

Number Special Thing
1 The multiplicative identity.
2 The only even prime.
3 Number of spatial dimensions we experience.
4 Smallest number of colors sufficient to color all planar maps.
5 Number of Platonic solids.
6 Smallest perfect number.
7 Smallest number of sides of a regular polygon that is not constructible by straightedge and compass.
8 Largest cube in the Fibonacci sequence.
9 Maximum number of cubes that are needed to sum to any positive integer.
10 Base of our number system.
11 Largest known multiplicative persistence.
12 Smallest abundant number.
13 Number of Archimedian solids.
14 Smallest even number n with no solutions to φ(m) = n.
15 Smallest composite number n with the property that there is only one group of order n.
16 Only number of the form xy = yx with x and y being different integers.
17 Number of wallpaper groups.
18 Only positive number that is twice the sum of its digits.
19 Maximum number of 4th powers needed to sum to any number.
20 Number of rooted trees with 6 vertices.
table.wiki-content-table tr:nth-child(3n+2){
    background: #FDD;
table.wiki-content-table tr:nth-child(2n+3){
    color: #900;

Try It on the CSS Zone Sandbox!

Base CSS »

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License