freeCodeCamp/guide/english/css/css3-nth-child-selector/index.md

title

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

  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.

  a:nth-child(odd) {
    /* CSS goes here */
  }

Even

Even returns all even elements of a given type.

  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:

  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