CSS: nth-child selector examples

The real power of the nth-child() selector (a CSS3 structural pseudo-class) lies in its ability to accept numeric formulas as its arguments, for example 2n+1. Once we get used to these features, the possibilities are infinite. Let's see some examples.

<ul id="test">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
#test li:nth-child(2n+1) {color: green;}
#test li:nth-child(odd) {background: silver;}
#test li:nth-child(5) {font-weight: bold; text-transform: uppercase;}
#test li:nth-child(7n-6) {border: medium solid; padding: 0.5em;}

The first and second rule select all odd elements, the former with a formula, the latter with a keyword. The third rule selects the fifth list item (remember that the numbering starts from 1, not 0). Finally, the last rule shows what happen when our formula has a negative value. In this case, this rule will match the first list item (seven list items less six equals to one).

Example

Live example

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.