skip to content

CSS: The nth-child Pseudo-Class

The nth-child pseudo class in CSS3 is very useful for creating formatted Excel-style tables in HTML. Also for generating grid layouts without having to resort to a table.

nth-child Basic Rules

The syntax we are working with is :nth-child(an+b) where a is the frequency and b is the initial offset. This generated an infinite series starting with n=0, but containing only positive values.

Some examples might make this clearer:

2n, 2n+0 or even
2, 4, 6, 8, 10, 12,...
2n+1 or odd
1, 3, 5, 7, 9, 11, ...
2n+2
2, 4, 6, 8, 10, 12, ...
2n+3
3, 5, 7, 9, 11, 12, ...
2n+4
4, 6, 8, 10, 12, 14, ...
3n, 3n+0 or 3n+3
3, 6, 9, 12, 15, 18, ...
3n+1
1, 4, 7, 10, 13, 16, ...

So you can see that the series starts from b and then increments by a for each value. Any results that would be zero or negative are skipped meaning that we can't look backwards in the DOM tree.

Example using hover effects

This example makes use of the nth-child pseudo-class in combination with the ~ general sibling selector.

Firstly we create the grid by simply floating a number of DIVs to the left and using nth-child to start a new row after every ten boxes:

<style> #stage div { float: left; margin: 5px; width: 60px; height: 50px; background: #efefef; } #stage div:hover { background: red; } #stage div:nth-child(10n+1) { clear: left; } </style>

In the HTML we've added an id to each of the DIVs (#div1, #div2, ..., #div100) and then assigned a hover event as follows:

<style> #div1:hover ~ div:nth-child(1n) { background: yellow; } #div2:hover ~ div:nth-child(2n) { background: yellow; } #div3:hover ~ div:nth-child(3n) { background: yellow; } #div4:hover ~ div:nth-child(4n) { background: yellow; } ... </style>

This means that every nth sibling of DIV n will turn yellow when the cursor is over DIV n. So when you mouseover the number 3 (#div3) it turns red while every DIV that is a multiple of 3 turns yellow. Try it and see:

1n
2n
3n
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

This will work in every browser that supports both nth-child and the ~ selector. Here you can see screenshots for a couple of different cases:

   

Formatting a TABLE using nth-child

A more typical CSS example is how to format an HTML table to make it look more professional - with alternating column or row colours for example:

12345678910
11121314151617181920
21222324252627282930
31323334353637383940
41424344454647484950
51525354555657585960

While not terribly pretty, the markup is very simple and you can easily change the colours. For the 'tartan' effect we've used background colours with some alpha-transparency, so where the column (red) and row (blue) colours meet it creates a third (purple) colour.

The TABLE has a class value of "tartan" for this example:

<style> .tartan tr:nth-child(odd) { background: rgba(0,0,255,0.5); } .tartan td:nth-child(even) { background: rgba(255,0,0,0.5); } </style>

To target the intersecting cells directly, so as not to require transparent backgrounds and to be able to specify another colour, we could also use:

<style> .tartan tr:nth-child(odd) td:nth-child(even) { background: #fff; } </style>

This targets all table cells that are even children of odd rows. And here is the result:

12345678
910111213141516
1718192021222324
2526272829303132
3334353637383940
4142434445464748
4950515253545556
5758596061626364

You'll notice in the above styles that we've used the odd and even shorthand - which is probably all you will need for a simple application - and much easier to remember. See under Related Articles for more examples of styled TABLEs.

References

< CSS

Post your comment or question
top