CSS3 Nth Child Selector – CSS


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

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.