CSS – Select Every 3rd Element with nth-child

These are CSS selectors to select every third element.

You should have some wrapper around these elements. If the elements are list items (li), then the wrapper is the ul element (or ol). And, that wrapper should also have a CSS ID or class assigned to it. In all the examples below, we use #wrapper but you can replace that below with your own wrapper ID or class.

In addition, all our examples use .element but you must replace that below with whatever CSS class your elements have.

Selecting Every 3rd Element

Example 1

How to select every third element, starting with the first element:

#wrapper .element:nth-child(3n-2) {

    /* CSS rules go here */

}

In addition, the above could be used to select the first column of a 3-column layout.

Example 2

How to select every third element, starting with the second element:

#wrapper .element:nth-child(3n+2) {

    /* CSS rules go here */

}

In addition, the above could be used to select the second column of a 3-column layout.

Example 3

How to select every third element, starting with the third element:

#wrapper .element:nth-child(3n+3) {

    /* CSS rules go here */

}

In addition, the above could be used to select the third column of a 3-column layout.