Selector Example Example description

.intro Selects all elements with class="intro"

.class
<div class="name1 name2"> Selects all elements with
… both name1 and name2 set within its class
.class1.class2 </div> attribute
<div class="name1"> Selects all elements with name2 that is a
<div class="name2"> descendant of an element with name1
    …
  </div>
.class1 .class2 </div>
#id #firstname Selects the element with id="firstname"
* Selects all elements
*
p Selects all <p> elements
element
p.intro Selects all <p> elements with class="intro"
element.class
div, p Selects all <div> elements and all <p>
element,element elements
div p Selects all <p> elements inside <div>
element element elements
div > p Selects all <p> elements where the parent is
element>element a <div> element
div + p Selects all <p> elements that are placed
element+element immediately after <div> elements
p ~ ul Selects every <ul> element that are preceded
element1~element2 by a <p> element
[target] Selects all elements with a target attribute
[attribute]
[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
[attribute|=value] value starting with "en"
a[href^="https"] Selects every <a> element whose href
[attribute^=value] attribute value begins with "https"
a[href$=".pdf"] Selects every <a> element whose href
[attribute$=value] attribute value ends with ".pdf"
a[href*="w3schools"] Selects every <a> element whose href
attribute value contains the substring
[attribute*=value] "w3schools"
a:active Selects the active link
:active
p::after Insert something after the content of each
::after <p> element
p::before Insert something before the content of each
::before <p> element
input:checked Selects every checked <input> element
:checked
 input:default Selects the default <input> element
:default
:disabled input:disabled Selects every disabled <input> element
p:empty Selects every <p> element that has no
:empty children (including text nodes)
input:enabled Selects every enabled <input> element

:enabled
p:first-child Selects every <p> element that is the first
:first-child child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element

: pseudo-elements
:: pseudo-classes

Selector Example Example description

p::first-line Selects the first line of every <p>
::first-line element
p:first-of-type Selects every <p> element that is the
first <p> element of its parent
:first-of-type
input:focus Selects the input element which has
focus

:focus
:hover a:hover Selects links on mouse over
input:in-range Selects input elements with a value
:in-range within a specified range
input:indeterminate Selects input elements that are in an
:indeterminate indeterminate state
input:invalid Selects all input elements with an
:invalid invalid value
p:lang(it) Selects every <p> element with a lang
:lang(language) attribute equal to "it" (Italian)
p:last-child Selects every <p> element that is the
:last-child last child of its parent
p:last-of-type Selects every <p> element that is the
:last-of-type last <p> element of its parent
a:link Selects all unvisited links
:link
:not(p) Selects every element that is not a <p>
:not(selector) element
p:nth-child(2) Selects every <p> element that is the
:nth-child(n) second child of its parent
p:nth-last-child(2) Selects every <p> element that is the
second child of its parent, counting from
:nth-last-child(n) the last child
p:nth-last-of-type(2) Selects every <p> element that is the
second <p> element of its parent,
:nth-last-of-type(n) counting from the last child
 p:nth-of-type(2) Selects every <p> element that is the
:nth-of-type(n) second <p> element of its parent
p:only-of-type Selects every <p> element that is the
:only-of-type only <p> element of its parent
p:only-child Selects every <p> element that is the
:only-child only child of its parent
input:optional Selects input elements with no
"required" attribute
:optional
input:out-of-range Selects input elements with a value
:out-of-range outside a specified range
input::placeholder Selects input elements with placeholder
::placeholder text
input:read-only Selects input elements with the
:read-only "readonly" attribute specified
input:read-write Selects input elements with the
:read-write "readonly" attribute NOT specified
input:required Selects input elements with the
:required "required" attribute specified
:root :root Selects the document's root element
::selection Selects the portion of an element that is
::selection selected by a user
#news:target Selects the current active #news
element (clicked on a URL containing
:target that anchor name)
input:valid Selects all input elements with a valid
:valid value
:visited a:visited Selects all visited links