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

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

The look into the CSS selector :nth-child and the cool ways it can be used.
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

Basic shopping list with no styles

: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.

Basic shopping list where ever odd row is coloured red

: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;
}
Basic shopping list where only the 4th instance is coloured 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;
}
Basic shopping list where every item is selected from the 3rd index.

: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;
}
Basic shopping example where every item is selected up to and including the 3rd index.

: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;
}
Basic shopping list where every item between 1 and 5 are selected.

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.