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