Ways to use the CSS nth-child Selector (Code Snippet)

Today I saw a twitter post with someone talking about using CSS selectors to select multiple divs inside another without the need for JS. I must admit outside of needing to use nth-child to alternate background colours on table rows. I have not used it much so I wanted to take a quick deeper dive into what can be achieved using it.

So lets start with a basic shopping list html structure, which we have given a class name of shopping-list

<ul class="shopping-list">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Cookies</li>
  <li>Soda</li>
</ul>

this will produce the following output

:nth-child(odd, even)

.shopping-list li:nth-child(odd){
  color: red;
}

First off I will apply my most uses case for a nth-child and that is alternating design changes. The CSS example above will turn every odd row's background colour red as seen below. You can also change the word odd to even and it will pick every even row instead.

:nth-child(4)

On this example we are passing in a flat number which tells the selector to only select that specific index. For the example below I have selected the 4th index to be red this time.

.shopping-list li:nth-child(4){
  color: red;
}

:nth-child(n+3) - Positive Range Selection

In this example we are telling nth-child to start at the child of the number supplied, In this case 3 and every child after itself.

.shopping-list li:nth-child(n+3){
  color: red;
}

:nth-child(-n+3) - Negative Range Selection

As with the example above we can do the inverse and this time tell nth-child to select the indexed child and the children before it.

.shopping-list li:nth-child(-n+3){
  color: red;
}

:nth-child(n+2):nth-child(-n+4) - Range Selection

The above usage of nth-child introduces us to the concept of chaining. We can chain the nth-child to create more complex selection criteria. Here we are using it to combine the positive and negative range selections in order to make a range selection. The following examples starts at the second child and ends at the forth.

.shopping-list li:nth-child(n+2):nth-child(-n+4){
  color: red;
}

Now your turn.

There is a ton of ways you can combine these selectors for a variety of use cases, you can even combine them with the selector :nth-of-type which I will talk about in another blog post soon.

Let me know in the comments if I am missing an example you think should be here or if you know any cool ways this has been used we can share.