Things to know about the :nth-child() selector in CSS

:nth-child() in CSS is especially useful in styling complex tables and lists. Here's what you need to know about :nth-child() in CSS .

Things to know about the :nth-child() selector in CSS Picture 1

Like all CSS selectors, you can use :nth-child() to identify elements in a web page and apply different styles to them. But this selector allows you to narrow down a group of factors based on their relative position.

This selector supports some basic keywords for common cases. Additionally, it also provides powerful pattern matching syntax. Using it, you can select components based on regular patterns, repetitions, or complex definitions according to your needs.

:nth-child() selector syntax

Although it is a CSS pseudo-class selector, the :nth-child() syntax is different from other selectors. It takes a template argument to combine elements in a child element group:

:nth-child(args) { /*.*/ }

The main focus is on the arguments in parentheses. These arguments specify the subset of elements to select.

Use keyword values ​​for common cases

This selector can contain two keyword values: odd and even . They are especially useful for styling alternate table rows.

A simple ordered list is another good example of when you can use these keyword values:

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

Using the :nth-child(odd) selector , you can change the color of each replacement item:

:nth-child(odd) { color: red; }

Items start at index 1, so the first item will appear in red, then the third. so on and so forth:

Things to know about the :nth-child() selector in CSS Picture 2

More flexibility using function notation

You can use a single integer to select a single element, like this:

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

In this case, the selector combines only the 4th item in the list:

Things to know about the :nth-child() selector in CSS Picture 3

This syntax is a special case of the more general functional syntax that selects items that match a certain pattern. This syntax is:

:nth-child(An+B) { /*.*/ }

In this notation, A is the step size. This means the number of times the selector moves to select the next item. It allows you to select every other item, every third item, etc. B is the starting point of selection.

For example, take the argument 3n+1 :

li:nth-child(3n+1) { color: red; }

This will start the selection at the first item and continue with every third item after that:

Things to know about the :nth-child() selector in CSS Picture 4

Compare it with the expression 3n+2:

li:nth-child(3n+2) { color:red; }

This action still selects every third item, but now it starts from the second item in the list:

Things to know about the :nth-child() selector in CSS Picture 5

Another interesting example is :nth-child(n+3):

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

This code will select each item (n), starting from the third (+3). It will look like this.

Things to know about the :nth-child() selector in CSS Picture 6

You can also use subtraction to achieve certain results:

li:nth-child(3n-1) { color: red; }

This example still selects every third item, but it starts from the 'first minus sign'. In practice, this means it will pick the second item in the list, then the fifth, etc.:

Things to know about the :nth-child() selector in CSS Picture 7

Syntax of

You can also use the of keyword followed by a selector as an argument in the :nth-child() selector. This syntax allows you to narrow down the possible items that the regular pattern selects from.

For example, imagine your markup is more complex than the original:

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

 Now, use :nth-chil

Now, use :nth-child to select even items from the set of items with a specific class:

.new { font-weight: bold; } li:nth-child(even of.new) { color: red; }

Note that only even-numbered bold items are red:

Things to know about the :nth-child() selector in CSS Picture 8

Also consider the difference with li.new:nth-child(even) which targets .new elements, but only if they are even. These would be items 2 and 6 in the example above.

Above are the things you need to know about using the :nth-child() selector in CSS. Hope the article is useful to you.

Samuel Daniel

Update 20 October 2023