18/11/2020 CSS Selectors Reference
HTML CSS MORE EXERCISES
w3schools.com LOG IN
CSS Selector Reference
❮ Previous Next ❯
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
Use our CSS Selector Tester to demonstrate the different selectors.
Selector Example Example description
.class .intro Selects all elements with
class="intro"
.class1.class2 .name1.name2 Selects all elements with both
name1 and name2 set within its
class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2
that is a descendant of an element
with name1
#id #firstname Selects the element with
id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with
class="intro"
element,element div, p Selects all <div> elements and all
<p> elements
element element div p Selects all <p> elements inside
<div> elements
https://www.w3schools.com/cssref/css_selectors.asp 1/7
18/11/2020 CSS Selectors Reference
HTML CSSdiv >MORE
element>element p EXERCISES
Selects all <p> the
elementswhere
parent is a <div> element
element+element div + p Selects all <p> elements that are
placed immediately after <div>
elements
element1~element2 p ~ ul Selects every <ul> element that
are preceded by a <p> element
[attribute] [target] Selects all elements with a target
attribute
[attribute=value] [target=_blank] Selects all elements with
target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title
attribute containing the word
"flower"
[attribute|=value] [lang|=en] Selects all elements with a lang
attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose
href attribute value begins with
"https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose
href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose
href attribute value contains the
substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content
of each <p> element
::before p::before Insert something before the content
of each <p> element
:checked input:checked Selects every checked <input>
element
:default input:default Selects the default <input>
element
:disabled input:disabled Selects every disabled <input>
element
https://www.w3schools.com/cssref/css_selectors.asp 2/7
18/11/2020 CSS Selectors Reference
:empty
HTML p:empty
CSS MORE Selects every <p> element
EXERCISES that has
no children (including text nodes)
:enabled input:enabled Selects every enabled <input>
element
:first-child p:first-child Selects every <p> element that is
the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p>
element
::first-line p::first-line Selects the first line of every <p>
element
:first-of-type p:first-of-type Selects every <p> element that is
the first <p> element of its parent
:focus input:focus Selects the input element which has
focus
:fullscreen :fullscreen Selects the element that is in full-
screen mode
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value
within a specified range
:indeterminate input:indeterminate Selects input elements that are in
an indeterminate state
:invalid input:invalid Selects all input elements with an
invalid value
:lang(language) p:lang(it) Selects every <p> element with a
lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is
the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is
the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a
<p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is
the second child of its parent
https://www.w3schools.com/cssref/css_selectors.asp 3/7
18/11/2020 CSS Selectors Reference
HTML
:nth-last-child(n) CSS MORE
p:nth-last-child(2) EXERCISES
Selects every <p> element that is
the second child of its parent,
counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is
the second <p> element of its
parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is
the second <p> element of its
parent
:only-of-type p:only-of-type Selects every <p> element that is
the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is
the only child of its parent
:optional input:optional Selects input elements with no
"required" attribute
:out-of-range input:out-of-range Selects input elements with a value
outside a specified range
::placeholder input::placeholder Selects input elements with the
"placeholder" attribute specified
:read-only input:read-only Selects input elements with the
"readonly" attribute specified
:read-write input:read-write Selects input elements with the
"readonly" attribute NOT specified
:required input:required Selects input elements with the
"required" attribute specified
:root :root Selects the document's root
element
::selection ::selection Selects the portion of an element
that is selected by a user
:target #news:target Selects the current active #news
element (clicked on a URL
containing that anchor name)
:valid input:valid Selects all input elements with a
valid value
:visited a:visited Selects all visited links
https://www.w3schools.com/cssref/css_selectors.asp 4/7
