CSS {selectors: cheat-sheet}
By Web Dev Simplified https://courses.webdevsimplified.com
Basic
Name CSS Description Results
Universal Selector * Select all elements a b c d
Select elements of that type
Type Selector div Select div elements a div c div
Select elements with that class
Class Selector .c Select elements with the c class .a .b .c .d
Select elements with that id
Id Selector #i 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
Select elements that are div
descendants of the first
Descendant Selector div a element
a b
Select anchors that are inside a div
a c a d
Select elements that are direct
div
Direct Child Selector div > a children of the first element
Select anchors that are direct children of
a b
a div
a c a d
Select elements that are
siblings of the first element
General Sibling div ~ a and come after the first a div a a
Selector element
Selects all anchors that are siblings of a
div and come after the div
Select elements that are
siblings of the first element
Adjacent Sibling div + a and come directly after the a div a a
Selector first element
Selects all anchors that are siblings of a
div and come directly after the div
Select elements that match
Or Selector div, a any selector in the list
Selects all anchors and all divs
a div a b
Select elements that match all
And Selector div.c the selector combinations
Selects all divs with the class c
.a div.c .c div
Attribute
Name CSS Description Results
Select elements that have that
Has Attribute [a] attribute [a] [a=”1”] [c] d
Select elements with the a attribute
Select elements that have that
attribute with exactly that
Exact Attribute [a=”1”] value [a] [a=”1”] [c] d
Select elements with the a attribute with
a value of 1
Select elements that have that
attribute which start with that
Begins With Attribute [a^=”1”] value [a=”12”] [a=”21”]
Select elements with the a attribute with
a value that starts with 1
Select elements that have that
attribute which end with that
Ends With Attribute [a$=”1”] value [a=”12”] [a=”21”]
Select elements with the a attribute with
a value that ends with 1
Select elements that have that
attribute which contain that
Substring Attribute [a*=”1”] value anywhere [a=”12”] [a=”21”]
Select elements with the a attribute with
a value that contains a 1
Pseudo Element
Name CSS Description Results
Creates an empty element div
Before Selector div::before directly before the children of
selected element before c after
Creates an empty element div
After Selector div::after directly after the children of
selected element before c after
Pseudo Class State
Name CSS Description
Select elements that are
Hover Selector button:hover hovered by the mouse
Select buttons that are being hovered
Select elements that are
focused.
Focus Selector button:focus 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
Select inputs that are required
Required Selector input:required Select inputs with the required attribute
Select checkboxes/radio
Checked Selector input:checked 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
Select elements that are the div div
First Child Selector a:first-child first child inside a container
Select anchors that are the first child a b b a
Select elements that are the div div
Last Child Selector a:last-child last child inside a container
Select anchors that are the last child a b b a
Select elements that are the
nth child inside a container div
Nth Child Selector a:nth-child(2n) based on the formula
Select anchors that are even numbered a a b a
children
Select elements that are the
nth child inside a container div
Nth Last Child a:nth-last-child(3) based on the formula counting
Selector from the end a a b a
Select anchors that are the third to last
child
Select elements that are the div div
Only Child Selector a:only-child only child inside a container
Select anchors that are the only child a b a
Select elements that are the
first of a type inside a
div
First Of Type Selector a:first-of-type container
Select the first anchor in a container
b a a b
Select elements that are the
last of a type inside a
div
Last Of Type Selector a:last-of-type container
Select the last anchor in a container
b a a b
Select elements that are the
nth of a type inside a container
div
Nth Of Type Selector a:nth-of-type(2n) based on the formula
Select every second anchor
b a a b
Select elements that are the
Nth Last Of nth of a type inside a container div
Type Selector a:nth-last-of-type(2) based on the formula counting
from the end b a a b
Select the second to last anchor
Select elements that are the
only of a type inside a div
Only Of Type Selector a:only-of-type container
Select anchors that are the only anchor in b b a b
a container
Select all elements that do not
match the selector inside the
Not Selector a:not(.c) not selector b a.c a a.d
Select all anchor tags that do not have
the c class
