CSS – Select Every 4th Element With nth-child

These are CSS selectors to select every fourth 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 change 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 4th Element

Example 1

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

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

    /* CSS rules go here */

}

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

Example 2

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

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

    /* CSS rules go here */

}

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

Example 3

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

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

    /* CSS rules go here */

}

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

Example 4

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

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

    /* CSS rules go here */

}

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