The nth-child

Child elements are those placed inside another element. For instance the list item element (li) are the children of the unordered (ul) or ordered list (ol) elements.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

The nth-child pseudo-class can do many things. Like many things CSS the basics are fairly simple but it can soon get more complicated the further you go.

So what does it do? Here’s an example:

li:nth-child(2) {
  color: green;
}

If applied to the list above (or any list) the selector, li:nth-child(2), is selecting the second list item of it’s parent and making it green.

• item 1
• item 2
• item 3

So the n in nth is a variable—it could be any number—and the (2) at the end is saying what that variable is.

IMPORTANT: Note that this is attached to the child itself, that is the li element and not the child’s parent, in this case the ul.

It’s important to understand how this works. The targeted element looks for it’s parent and if it is the nth child (ie. second, third, fourth or whatever) the styling values are applied. When it looks for it’s parent it counts downwards and this includes different elements that are at the same level. So a div container could have an h1 followed by a couple of paragraphs, then a list, an h3 and so on. All of these are counted despite the fact you’ve put p:nth-child(4)

In the example below if you wanted to target that third paragraph you might write:

p:nth-child(3) {
  color: blue;
}

Well I’ve done just that below and as you can see nothing has changed. Why? Because the third child of the parent is an h5 heading and not a paragraph.

If we remove the p from the declaration like thus:

:nth-child(3) {
  color: blue;
}

…you can see that the declaration has done it’s job and targetted the 3rd child that happens to be that h5 heading. We could have also used h5:nth-child(3) which works just the same, even though there is only one h5 heading here.

Understanding this means the :nth-child pseudo-class is often most useful, and less confusing, without an html element, for example :nth-child(5).

First paragraph.

So if we do want to target the third paragraph here that’s where the :nth-of-type pseudo class comes in. Here the code works fine:

p:nth-of-type(3) {
  color: blue;
}

More Complicated Targetting

p:nth-child(an+b)

The selector can also be written as p:nth-child(an+b) where a and b are variables for any whole number, eg. p:nth-child(2n+1). What of earth does this mean then?

Well it looks more complicated than it is fortunately. the letter a in (an+b) simply says every second, third, fourth etc. number denoted by a 2, 3, 4 etc.. The bit after the plus sign simply means starting with that number. It’s 2n+5 it means every second number starting with the number 5.

Here are some examples applied to this list of items below.

li:nth-child(5n+10) makes the text white.
li:nth-child(3n+1) adds a smiley face 😁 to every third item starting with the first one.
li:nth-child(7n+7) underlines every seventh item starting with the seventh one. li:nth-child(even) makes the text italic and the list number yellow and bold.
batch: selects a batch of elements from a to b.

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5
6. item 6
7. item 7
8. item 8
9. item 9
10. item 10
11. item 11
12. item 12
13. item 13
14. item 14
15. item 15
16. item 16
17. item 17
18. item 18
19. item 19
20. item 20
21. item 21
22. item 22
23. item 23
24. item 24
25. item 25
26. item 26
27. item 27
28. item 28
29. item 29
30. item 30

..

This might seem a bit strange and not much use but it’s good to know about and could be applied to long lists of things or spreadsheet data. For example suppose on a list of years you wanted to mark every leap year, starting in a year:

Leap Years

Leap years using the pseudo class li:nth-child(4n+2). The 4 denotes every fourth item and the 2 denotes starting with the second one.

• 2019
• 2020
• 2021
• 2022
• 2023
• 2024
• 2025
• 2026
• 2027
• 2028
• 2029
• 2030
• 2031
• 2032
• 2033
• 2034
• 2035
• 2036
• 2037
• 2038
• 2039
• 2040
• 2041
• 2042
• 2043
• 2044
• 2045
• 2046
• 2047
• 2048
• 2049
• 2050
• 2051
• 2052
• 2053
• 2054
• 2055
• 2056
• 2057
• 2058
• 2059
• 2060
• 2061
• 2062
• 2063
• 2064
• 2065
• 2066
• 2067
• 2068

Using multiple selectors together

So what if we wanted to select not just, let’s say the fourth element, of it’s parent but also all those following it?

Here’s a table:

Let’s say I want to target the cell with item 3c. How would I do that?

Well it’s the fourth table row down and the third table cell in that row.

So that gives us:

table tr:nth-child(4) > td:nth-child(3) {
  color:red;
}

More Pseudo-classes

There’s a lot of pseudo-classes now. It’s good to have an idea of what’s avaialable but memorizing them might be tiresome. Rather you can look for the one you need when a specific situation arises.

Other similar sounding pseudo-classes: