Quick look at nth-of-type

The nth-of-type selector allows you to select elements based on their position within a parent container. This opens up alot of possibilities for styling elements dynamically without using additional classes.

Here’s how it works

In the example below we use nth-of-type(n + 2) to select all div elements that are siblings of the same type (div) and are at least the second child. The n + 2 portion means it starts selecting from the second div element onwards.

nth-of-type(-1n + 3) selects div elements that are the third child or earlier in their parent container, counting from the end of the list. -1n + 3 means it selects the third div element from the end (see illustration).

.container div:nth-of-type(n + 2):nth-of-type(-1n + 3) {
    background-color: yellow;

So cool

With nth-of-type, you can target elements within a container based on their position.

Kevin Powell talks about the nth-of-type here

Scroll to Top