CSS

{selectors: cheat-sheet}

By Web Dev Simplified, copied(?) by Henrik Berglund

Basic

Name
CSS
Description
Results
Universal Selector
*
Select all elements
A B C D
Type Selector
div
Select elements of that type
Select div elements
a DIV c DIV
Class Selector
.c
Select elements with that class
Select elements with the c class
.a .b .C .d
Id Selector
#i
Select elements with that id
Select elements with the i id
*It is best practice to not use ids in CSS
#a #b #I #d

Combination

Name
CSS
Description
Results
Descendant Selector
div a
Select elements that are descendants of the first element
Select anchors that are inside a div
div
A
b
A
c
A
d
Direct Child Selector
div > a
Select elements that are direct children of the first element
Select anchors that are direct children of a div
div
A
b
a
c
a
d
General Sibling Selector
div ~ a
Select elements that are siblings of the first element and come after the first element
Selects all anchors that are siblings of a div and come after the div
a div A A
Adjacent Sibling Selector
div + a
Select elements that are siblings of the first element and come directly after the first element
Selects all anchors that are siblings of a div and come directly after the div
a div A a
Or Selector
div, a
Select elements that match any selector in the list
Selects all anchors and all divs
A DIV A b
And Selector
div.c
Select elements that match all the selector combinations
Selects all divs with the class c
.a DIV.C .c div

Attribute

Name
CSS
Description
Results
Has Attribute
[a]
Select elements that have that attribute
Select elements with the a attribute
[A] [A=”1”] [c] d
Exact Attribute
[a=”1”]
Select elements that have that attribute with exactly that value
Select elements with the a attribute with a value of 1
[a] [A=”1”] [c] d
Begins With Attribute
[a^=”1”]
Select elements that have that attribute which start with that value
Select elements with the a attribute with a value that starts with 1
[A=”12”] [a=”21”]
Ends With Attribute
[a$=”1”]
Select elements that have that attribute which end with that value
Select elements with the a attribute with a value that ends with 1
[a=”12”] [A=”21”]
Substring Attribute
[a*=”1”]
Select elements that have that attribute which contain that value anywhere
Select elements with the a attribute with a value that contains a 1
[A=”12”] [A=”21”]

Pseudo Element

Name
CSS
Description
Results
Before Selector
div::before
Creates an empty element directly before the children of selected element
div
BEFORE
c
after
After Selector
div::after
Creates an empty element directly after the children of selected element
div
before
c
AFTER

Pseudo Class (State)

Name
CSS
Description
Hover Selector
button:hover
Select elements that are hovered by the mouse
Select buttons that are being hovered
Focus Selector
button:focus
Select elements that are focused.
Select buttons that are being focused *Focus is set by either tabbing to an element or clicking an element such as a button or anchor tag
Required Selector
input:required
Select inputs that are required
Select inputs with the required attribute
Checked Selector
input:checked
Select checkboxes/radio buttons that are checked
Select inputs that are checked
Disabled Selector
input:disabled
Select inputs that are disabled
Select inputs with the disabled attribute

Pseudo Class (Position/Other)

Name
CSS
Description
Results
First Child Selector
a:first-child
Select elements that are the first child inside a container
Select anchors that are the first child
div
div
A
b
b
a
Last Child Selector
a:last-child
Select elements that are the last child inside a container
Select anchors that are the last child
div
div
a
b
b
A
Nth Child Selector
a:nth-child(2n)
Select elements that are the nth child inside a container based on the formula
Select anchors that are even numbered children
div
a
B
b
A
Nth Last Child Selector
a:nth-last-child(3)
Select elements that are the nth child inside a container based on the formula counting from the end
Select anchors that are the third to last child
div
a
A
b
A
Only Child Selector
a:only-child
Select elements that are the only child inside a container
Select anchors that are the only child
div
div
a
b
A
First Of Type Selector Selector
a:first-of-type
Select elements that are the first of a type inside a container
Select the first anchor in a container
div
b
A
a
b
Last Of Type Selector
a:last-of-type
Select elements that are the last of a type inside a container
Select the last anchor in a container
div
b
a
A
b
Nth Of Type Selector
a:nth-of-type(2n)
Select elements that are the nth of a type inside a container based on the formula
Select every second anchor
div
b
a
A
b
Nth Last Of Type Selector
a:nth-last-of-type(2)
Select elements that are the nth of a type inside a container based on the formula counting from the end
Select the second to last anchor
div
b
A
a
b
Only Of Type Selector
a:only-of-type
Select elements that are the only of a type inside a container
Select anchors that are the only anchor in a container
div
b
b
A
b
Not Selector
a:not(.c)
Select all elements that do not match the selector inside the not selector
Select all anchor tags that do not have the c class
b a.c A A.D