59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
---
|
|
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:
|
|
|
|
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child' target='_blank' rel='nofollow'>MDN Documentation</a>
|
|
<a href='https://css-tricks.com/almanac/selectors/n/nth-child/' target='_blank' rel='nofollow'>CSS Tricks - nth child selector</a>
|
|
<a href='https://css-tricks.com/examples/nth-child-tester/' target='_blank' rel='nofollow'>CSS Tricks - nth child tester</a>
|
|
<a href='https://www.w3schools.com/cssref/sel_nth-child.asp' target='_blank' rel='nofollow'>W3Scools - nth child selector</a>
|