**Type** Selector: **a** { }

# > . , * + ~ : { } ( ) [ ]

**Type** Selector: **a** { }

a

b

c

**ID** Selector: **#a** { }

#a

#b

#c

* **ID** is not recommended as a selector

**Child** Selector: **a > b** { }

a

b

c

a

b

a

b

**Descendant** Selector: **a b** { }

a

b

c

a

b

a

b

**Combine Descendant & ID** Selector: **#a b** { }

#a

b

c

a

b

a

b

**Class** Selector: **.a** { }

.a

.b

.c

**Combine the Class** Selector: **b.x** { }

a.x

b.x

c.x

**Comma Combinator** Selector: **a, c** { }

a

b

c

d

**Universal** Selector: ***** { }

a

b

c

d

**Combine Universal** Selector: **a *** { }

a

b

c

a

b

a

b

**Adjacent Sibling** Selector: **a + b** { }

a

b

b

b

**General Sibling** Selector: **a ~ b** { }

a

b

b

c

b

**First Child Pseudo** Selector: **b:first-child** { }

b

b

b

or

a

b

b

first-child

* In the second diagram, **first-child** is **'a'** element, not **'b'** element. So there is nothing to be selected

**Only Child Pseudo ** Selector:

**b:only-child** { } or

**a :only-child** { }

a

b

a

b

b

a

a

b

c

**Last Child Pseudo** Selector: **b:last-child** { }

b

b

b

or

0

0

last-child

b

b

c

* In the second diagram, **last-child** is **'c'** element, not **'b'** element. So there is nothing to be selected.

**Nth Child Pseudo** Selector:

**b:nth-child(2)** { }

1

2

3

b

b

b

or

1

2

3

a

b

b

or

1

2

3

b

a

b

* In the third diagram, **nth-child(2)** is **'a'** element, not **'b'** element. So there is nothing to be selected.

**a :nth-child(2)** { }

a

a

b

c

**Nth Last Child** Selector:

**a :nth-last-child(2)** { } or

**c:nth-last-child(2)** { }

a

a

b

c

d

4

3

2

1

**a:nth-last-child(2)** { } or

**b:nth-last-child(2)** { } or

**d:nth-last-child(2)** { }

a

a

b

c

d

4

3

2

1

* In this diagram, **nth-last-child(2)** is **'c'** element, not **'b'** element. So there is nothing to be selected.

**First of Type** Selector: **b:first-of-type** { }

a

b

a

b

**Nth of Type** Selector:

**a:nth-of-type(2)** { }

1

0

2

0

3

0

4

a

b

a

b

a

b

a

**a:nth-of-type(even)** { }

1

0

2

0

3

0

4

a

b

a

b

a

b

a

**a:nth-of-type(odd)** { }

1

0

2

0

3

0

4

a

b

a

b

a

b

a

**a:nth-of-type(2n+1)** { }

1

0

2

0

3

0

4

a

b

a

b

a

b

a

2n+1

* **n** is an every positive integer or zero value.

**Only of Type ** Selector: **b:only-of-type** { }

a

b

a

b

b

a

a

b

c

**Last of Type** Selector:

**b:last-of-type** { }

a

b

b

**a :last-of-type** { }

a

b

b

b

or

a

b

b

c

c

d

**.x:last-of-type** { }

a

b

c

b.x

c.x

b.x

c.x

or

a

b.x

c.x

b.x

c.x

b

c

* Those items won’t be selected as no **.x** is presented

**Empty** Selector: **a:empty** { }

a

a

a

b

b

hello

* No children elements or text.

**Negation Pseudo-class** Selector:

**a:not(.x)** { }

a

b

a.x

b.x

**a:not(:last-of-type)** { }

a

b

a

a

**Attribute** Selector:

**[for]** { }

a

a[x]

a[y]

a[z]

**a[for]** { }

a

a[x]

b[y]

c[z]

**Attribute Value** Selector: **a[for=“x”]** { }

a

a[x]

a[y]

a[z]

**Attribute Starts** Selector: **[for^=“x”]** { }

[x]

[xy]

[yz]

[zx]

**Attribute Ends** Selector: **[for$=“x”]** { }

[x]

[xy]

[yz]

[zx]

**Attribute Wildcard** Selector: **[for*=“x”]** { }

[x]

[xy]

[yz]

[zx]

This cheatsheet is desinged for a quick search on CSS selectors :) There are so many CSS selectors with unfamiliar symbols, > . , * + ~ [ ] etc, so I am often confused with how CSS selectors work. I wish this infographic helps you find proper CSS selectors. Print this PDF out and stick it on the wall. And if you need more details on CSS selectors, check out links below;