CSS Selector Syntax

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

Pattern	Matches
*	any element.
tag	any tag element.
t1>t2	any t2 element that is a direct child (first-level nesting) of t1.
t1 t2	any t2 element that is nested (any level) inside t1.
t1+t2	any t2 element immediately preceded by element t1. (t1 and t2 are siblings, with t1 coming first.)

• tag = HTML/XML element's name (the tag name). For example, {body, div, p, span, …}

For examples, see: CSS Tag Matching Tutorial.

CSS Selector for Element Structure

Pattern	Matches
tag:first-child	same 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-child	same 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

Pattern	Matches
★ 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-type	Same as tag:nth-of-type(1)
★ tag:last-of-type	Same as tag:first-of-type but the last.
★ tag:only-of-type	element 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

Pattern	Matches
★ tag:root	element tag that is root of document.
★ tag:only-child	element tag if it's the only child.
★ tag:empty	element tag that has no children (including text nodes)
★ tag:target	element tag that is the target of the referring URI.
★ tag:enabled	a user interface element tag that is enabled.
★ tag:disabled	a user interface element tag that is disabled
★ tag:checked	a 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

• attr = attribue name. For example, {id, class, href, src, …}
• val = attribue value.

CSS Selector for Matching Attribute and Value

Pattern	Matches
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

Pattern	Matches
tag.val	HTML only. Match tag tag that has class val. Same as tag[class~="val"]
tag#val	Match id val. Same as tag[id="val"]

Matching pseudo-classes

following are for matching “pseudo-classes”.

CSS selector for pseudo-classes

Pattern	Matches
a:link	a link.
a:visited	visited link.
a:active	a 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-classes

Pattern	Matches
tag:hover	mouse hover over a element tag
tag:focus	when 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

• http://www.w3.org/TR/selectors/
• Selectors

2013-08-18 thanks to Brennan Young for correction on nth child.