Say "Hello!"

  • This field is for validation purposes and should be left unchanged.

:nth-child styles


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 1st child */
:nth-child(1){background: red;}
/* or */
:first-child(){background: red;}

/* 1st and 3rd child elements */
:nth-child(3n+1){background:orange;}

/* 2nd and 4th child elements */
:nth-child(4n+2){background:yellow;}

/* 5th child */
:nth-child(5){background:blue;}

/* 1st and 6th child elements */
:nth-child(5n+1){background:orange;}

/* last child */
:last-child(){background: green;}

/* odd children */
:nth-child(odd) {background: #ff0000;}

/* even children */
:nth-child(even) {background: #0000ff;}

Back to Snippets Follow me on GitHub

Ashley Cameron logo
Blog