09/08/2022 01:00 CSS Selectors Reference
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
element>element div > p Selects all <p> elements
where the parent is a <div>
element
element+element div + p Selects the first <p>
element that is placed
immediately after <div>
elements
element1~element2 p ~ ul Selects every <ul> element
that is preceded by a <p>
element
[attribute] [target] Selects all elements with a
target attribute
[attribute=value] [target=_blank] Selects all elements with
https://www.w3schools.com/cssref/css_selectors.asp 1/5
09/08/2022 01:00 CSS Selectors Reference
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 equal to
"en" or 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
:empty p:empty Selects every <p> element
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
https://www.w3schools.com/cssref/css_selectors.asp 2/5
09/08/2022 01:00 CSS Selectors Reference
::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
::marker ::marker Selects the markers of list
items
: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
:nth-last-child(n) p:nth-last-child(2) 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
https://www.w3schools.com/cssref/css_selectors.asp 3/5
09/08/2022 01:00 CSS Selectors Reference
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/5
09/08/2022 01:00 CSS Selectors Reference
https://www.w3schools.com/cssref/css_selectors.asp 5/5
