CSS 3 offers a lot of great features for web designers building complex layouts and styles. The nth-child and related properties allow you to select elements based on their position in the document tree. There are four pseudo-classes you should know:
The argument (N) can take one of three values:
- a number - any positive integer (1,2,3,20, etc.)
- a keyword - even or odd
- an expression - in the form of an+b
N is a Number
When N is a number, this selects the child element that is in that exact ordinal location in the document tree.
For example, p:nth-child(4) selects the fourth paragraph tag of any parent element.
Set N as a number when you want to style a very specific element in the document.
Remember: if you use the selector without a parent element specified then any element that has four or more paragraphs will set the styles on the fourth paragraph. For example, if you have two DIV elements on your page, both with five paragraphs, both of them will have the styles set to the 4th paragraph unless you define a more specific selector such as div#content p:nth-child(4)
N is a Keyword
There are two keywords you can use: even and odd. They both select every other child element. Odd starts the selection at the first element and even starts the selection at the second.
For example, p:nth-child(even) selects every other paragraph starting with the second one.
N is an Expression
Setting N as an expression is where you get the most flexibility. With expressions you can select:
- every third element
- every fifth element
- every other element starting with the 5th one
- and so on...
The expression is in the form an+b where a and b are integers. For example :nth-child(3n+2)
The first part of the expression (an) tells the browser how many elements to skip before applying the style again.
- 1n - selects every element
- 2n - selects every other element (and is the same as the keyword even)
- 3n - selects every third element
- 20n - selects every twentieth element
- and so on...
The second part of the expression (b) tells the browser which element to start with.
- 2n+1 - starts at the first element
- 2n+2 - starts at the second element
- 2n+3 - starts at the third element
- 2n+20 - starts at the twentieth element
How to Build an Expression
- Decide how many elements you want to skip between selections. This is
a - Decide which element you want to start your selections with. This is
b - Place your a and b in the expression
:nth-child(an+b)
Special Notes About Expressions
If a and b are equal or b is zero, then b can be omitted. In other words, 2n+2 and 2n+0 are the same as 2n. And most designers write the expression with the shortest number of characters.
If a is equal to 1, then a can be omitted. In other words 1n+2 is the same as n+2.
If a is equal to 0, then the entire an part of the expression can be omitted. In other words, 0n+3 is the same as 3.
The keyword even is the same as the expression 2n.
The keyword odd is the same as the expression 2n+1.
Both a and b can be negative numbers, but the selector will only match if the final result is a positive value. You most often use negative numbers when using the nth-last-child and nth-last-of-type selectors.
The nth-last-child and nth-last-of-type Selectors
The difference between these two selectors and their non-last counterparts is that they count up from the bottom of the parent element in the document tree.
