Ashley Cameron Design

Ashley Cameron Design

:nth-child styles

This post was last updated: Sep 6, 2020
CSSSnippets

About a 1 minute read

"This is the real secret of life — to be completely engaged with what you are doing in the here and now. And instead of calling it work, realize it is play."

Alan Watts


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;}