CSS Selector Syntax

By Xah Lee. Date: . Last updated: .

This page is a complete list of CSS 2.1 and CSS 3 selector syntax. For a tutorial of common examples, see: CSS Tag Matching Tutorial.

Those marked with a star ★ are from CSS 3.

Matching Element Structure

CSS Selector for Matching Tags Names
PatternMatches
*any element.
tagany tag element.
t1>t2any t2 element that is a direct child (first-level nesting) of t1.
t1 t2any t2 element that is nested (any level) inside t1.
t1+t2any t2 element immediately preceded by element t1. (t1 and t2 are siblings, with t1 coming first.)

For examples, see: CSS Tag Matching Tutorial.

CSS Selector for Element Structure
PatternMatches
tag:first-childsame as tag:nth-child(1).
tag:nth-child(n)nth child element that is tag. (counting start at 1. Cannot be negative.)
tag:nth-last-child(n)counting from bottom, starting at 1.
tag:last-childsame as tag:nth-last-child(1)

Note: these matches the specified tag, only if that tag is the nth child. For example, if you have:

<p><b>1</b> <span>2</span></p>
span:first-child {color:red}

it will NOT match, because the “span” is second child, even though it is first “span” child.

CSS Selector for Element Structure
PatternMatches
tag:nth-of-type(n)element tag that is nth child of the same name. Count starts at 1.
tag:nth-last-of-type(n)Same as tag:nth-of-type(n) but counting from bottom.
tag:first-of-typeSame as tag:nth-of-type(1)
tag:last-of-typeSame as tag:first-of-type but the last.
tag:only-of-typeelement tag if its type is unique among siblings.

Example:

<div><div>11</div> <span>22</span> <span>33</span></div>
<div><div>AA</div> <span>BB</span> <div>CC</div></div>
span:only-of-type {color:red}

In the above example, only the <span>BB</span> will be colored.

CSS Selector for Element Structure
PatternMatches
tag:rootelement tag that is root of document.
tag:only-childelement tag if it's the only child.
tag:emptyelement tag that has no children (including text nodes)
tag:targetelement tag that is the target of the referring URI.
tag:enableda user interface element tag that is enabled.
tag:disableda user interface element tag that is disabled
tag:checkeda user interface element tag which is checked (For example, radio-button, checkbox)
tag:not(s)element tag if it's that does not match simple selector s.

Matching Attribute and Value

CSS Selector for Matching Attribute and Value
PatternMatches
tag[attr]element tag, has attribute attr.
tag[attr="val"]element tag, has attribute attr, value val.
tag[attr^="val"]element tag, has attribute attr, value begins with "val"
tag[attr$="val"]element tag, has attribute attr, value ends with "val"
tag[attr*="val"]element tag, has attribute attr, value contains "val"
tag[attr~="val"]element tag, has attribute attr, value is a list of space-separated values, one of which is exactly equal to val.
tag[attr|="val"]element tag, has attribute attr, value is a hyphen-separated list of values beginning (from the left) with val.

Example: color all links to Wikipedia green:

<a href="http://en.wikipedia.org/wiki/Geometry">Geometry</a>
a[href*="wikipedia.org/"] {color:green}
Shortcuts for Matching Class Value and Id Value
PatternMatches
tag.valHTML only. Match tag tag that has class val. Same as tag[class~="val"]
tag#valMatch id val. Same as tag[id="val"]

Matching pseudo-elements

following are for matching “pseudo-elements”.

CSS selector for pseudo-elements
PatternMatches
a:linka link.
a:visitedvisited link.
a:activea link while clicked but button not yet released.

Example:

a:visited,a:link {text-decoration:none}
a:hover {text-decoration:underline;background-color:yellow}
CSS selector for pseudo-elements
PatternMatches
tag:hovermouse hover over a element tag
tag:focuswhen a element is in focus (receive keys, etc. Press Tab ↹ to switch focus.)
tag:lang(lang_code)element of type tag if it is in (human) language lang_code (the document language specifies how language is determined).

Example:

<p lang="zh">天下</p>
/* make Chinese paragraphs red */
p:lang(zh) {color:red}

Reference

thanks to Brennan Young for correction on nth child.

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.