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