CSS Selector Cheat Sheet

Selector Example Example description CSS

.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Universal selector, selects all elements 2
element p Selects all <p> elements 1
element,element div, p Selects all <div> elements and all <p> elements 1
Element element div p Selects all <p> elements inside <div> elements 1
Selects all <p> elements where the parent is a <div>
element>element div > p 2
element
Selects all <p> elements that are placed immediately
element+element div + p 2
after <div> elements
element1~element Selects every <ul> element that are preceded by a
p ~ ul 3
2 <p> element
[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2
Selects all elements with a title attribute containing
[attribute~=value] [title~=flower] 2
the word "flower"
Selects all elements with a lang attribute value
[attribute|=value] [lang|=en] 2
starting with "en"
Selects every <a> element whose href attribute value
[attribute^=value] a[href^="https"] 3
begins with "https"
Selects every <a> element whose href attribute value
[attribute$=value] a[href$=".pdf"] 3
ends with ".pdf"
a[href*="w3school Selects every <a> element whose href attribute value
[attribute*=value] 3
s"] contains the substring "w3schools"
:active a:active Selects the active link 1
::after p::after Insert content after every <p> element 2
Insert content before the content of every <p>
::before p::before 2
element
:checked input:checked Selects every checked <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
Selects every <p> element that has no children
:empty p:empty 3
(including text nodes)
:enabled input:enabled Selects every enabled <input> element 3
Selects every <p> element that is the first child of its
:first-child p:first-child 2
parent
::first-letter p::first-letter Selects the first letter of every <p> element 1
::first-line p::first-line Selects the first line of every <p> element 1
Selects every <p> element that is the first <p>
:first-of-type p:first-of-type 3
element of its parent
:focus input:focus Selects the input element which has focus 2
:hover a:hover Selects links on mouse over 1
Selects input elements with a value within a specified
:in-range input:in-range 3
range
:invalid input:invalid Selects all input elements with an invalid value 3
Selects every <p> element with a lang attribute equal
:lang(language) p:lang(it) 2
to "it" (Italian)
Selects every <p> element that is the last child of its
:last-child p:last-child 3
parent
Selects every <p> element that is the last <p> element
:last-of-type p:last-of-type 3
of its parent
:link a:link Selects all unvisited links 1
:not(selector) :not(p) Selects every element that is not a <p> element 3
Selects every <p> element that is the second child of
:nth-child(n) p:nth-child(2) 3
its parent
Selects every <p> element that is the second child of
:nth-last-child(n) p:nth-last-child(2) 3
its parent, counting from the last child
:nth-last-of- p:nth-last-of- Selects every <p> element that is the second <p>
3
type(n) type(2) element of its parent, counting from the last child
Selects every <p> element that is the second <p>
:nth-of-type(n) p:nth-of-type(2) 3
element of its parent
Selects every <p> element that is the only <p>
:only-of-type p:only-of-type 3
element of its parent
Selects every <p> element that is the only child of its
:only-child p:only-child 3
parent
:optional input:optional Selects input elements with no "required" attribute 3
Selects input elements with a value outside a
:out-of-range input:out-of-range 3
specified range
Selects input elements with the "readonly" attribute
:read-only input:read-only 3
specified
Selects input elements with the "readonly" attribute
:read-write input:read-write 3
NOT specified
Selects input elements with the "required" attribute
:required input:required 3
specified
:root :root Selects the document's root element 3
Selects the portion of an element that is selected by a
::selection ::selection
user
:target #news:target Selects the current active #news element (clicked on a 3
 URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value 3
:visited a:visited Selects all visited links 1