CSS Selectors

Quick reference to the selectors in CSS, versions 1-3

CSS 1 Selectors
Selector Example Selects what
element p All <p> elements
element,element div, p All <div> elements and all <p> elements
element element div p All <p> elements inside <div> elements
#id #foo Element with id="foo"
.class .bar All elements with class="bar"
:active a:active Active link
:hover a:hover Mouse over
:link a:link Not visited links
:visited a:visited Visited links
::first-letter p::first-letter First letter of every <p> element
::first-line p::first-line First line of every <p> element
CSS 2 Selectors
Selector Example Selects what
* * All elements
[attribute] [target] All elements with a target attribute
[attribute=value] [target=_blank]
input[type="text"]
All elements with target="_blank"
All <input> elements of type "text"
[attribute~=value] [title~=foo] All elements with a title attribute containing "foo"
[attribute|=value] [lang|=en] All elements with a lang attribute value starting with "en"
element>element div > p All <p> elements where the parent is a <div> element
element+element div + p All <p> elements that are placed immediately after <div> elements
:first-child p:first-child All <p> elements that are the first child of its parent
:focus input:focus The input element with focus
:lang(language) p:lang(en) All <p> elements with the lang attribute "en"
::after p::after After the content of each <p> element
::before p::before Before the content of each <p> element
CSS 3 Selectors
Selector Example Selects what
[attribute^=value] a[href^="https"] <a> element whose href value begins with "https"
[attribute$=value] a[href$=".pdf"] <a> element whose href value ends with ".pdf"
[attribute*=value] a[href*="foo"] <a> element whose href value contains "foo"
element1~element2 p ~ ul <ul> element preceded by a <p> element
:checked input:checked Checked <input> element
:disabled input:disabled Disabled <input> element
:empty p:empty <p> element that has no children
:enabled input:enabled Enabled <input> element
:first-of-type p:first-of-type The first <p> element of its parent
:in-range input:in-range Input elements with a value within a range
:invalid input:invalid Input elements with an invalid value
:last-child p:last-child The last child of its parent
:last-of-type p:last-of-type The last <p> element of its parent
:not(selector) :not(p) Element that is not a <p> element
:nth-child(n) p:nth-child(2) The second child of its parent
:nth-last-child(n) p:nth-last-child(2) The second child of its parent, counting backwards
:nth-last-of-type(n) p:nth-last-of-type(2) The second <p> element of its parent, counting backwards
:nth-of-type(n) p:nth-of-type(2) The second <p> element of its parent
:only-of-type p:only-of-type The only <p> element of its parent
:only-child p:only-child The only child of its parent
:optional input:optional Input elements with no "required" attribute
:out-of-range input:out-of-range Input elements with a value outside a range
:read-only input:read-only Input elements with "readonly" attribute
:read-write input:read-write Input elements with no "readonly" attribute
:required input:required Input elements with "required" attribute
:root :root The document's root element
:target #foo:target The active #foo element (relative to a clicked link)
:valid input:valid Input elements with a valid value
Extra Selectors
Selector Example Selects what
::selection ::selection User selection.