download👇 read📖 < FrontEnd30 />

CSS

selectors

cheatsheet

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

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

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

2

3

4

a
b
a
b
a
b
a


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

1

2

3

4

a
b
a
b
a
b
a


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

1

2

3

4

a
b
a
b
a
b
a


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

1

2

3

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]

* the end *

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;

* Happy codesign today! *