title: CSS3 Nth Child Selector
CSS3 Nth Child Selector
The nth-child selector is a css psuedo-class taking a pattern by which to match one or more elements relative to their position amongst siblings.
Syntax
“`css
a:nth-child(pattern) {
/* Css goes here */
}
### Pattern
The patterns accepted by `nth-child` can come in the form of keywords or an equation of the form An+B.
#### Keywords
##### Odd
Odd returns all odd elements of a given type.css
a:nth-child(odd) {
/* CSS goes here */
}
##### Even
Even returns all even elements of a given type.css
a:nth-child(even) {
/* CSS goes here */
}
#### An+B
Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).
For example, the following will match every 3rd anchor element:css
a:nth-child(3n) {
/* CSS goes here */
}
“`
More Information:
MDN Documentation
CSS Tricks – nth child selector
CSS Tricks – nth child tester
W3Scools – nth child selector