CSS – Select Every Other Element With nth-child

These are CSS selectors to select every other element, or every second 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 Other Element

Example 1

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

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

    /* CSS rules go here */

}

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

Example 2

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

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

    /* CSS rules go here */

}

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