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. |
Courtesy of http://www2.stetson.edu/~efriedma/numbers.html
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.