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