CSS 2.1 ＆ CSS 3 Selector Syntax

Xah Lee, 2010-03-12, …, 2013-03-16

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

CSS 2.1 Selector Syntax

Pattern	Meaning
`*`	Match any element.
`‹tag›`	Match any ‹tag› element.
`‹tag1›>‹tag2›`	Match any ‹tag2› element that is a direct child (first-level nesting) of ‹tag1›.
`‹tag1› ‹tag2›`	Match any ‹tag2› element that is nested (any level) inside ‹tag1›.
`‹tag1›+‹tag2›`	Match any ‹tag2› element immediately preceded by element ‹tag1›. (‹tag1› and ‹tag2› are siblings, with ‹tag1› coming first.)
`‹tag›.‹val›`	HTML only. Match ‹tag› that has class ‹val›. (identical to `‹tag›[class~="‹val›"]`)
`‹tag›#‹val›`	Match any ‹tag› element if its “id” is ‹val›.

Pattern	Meaning
`‹tag›[‹attr›]`	Match any ‹tag› element with the attribute ‹attr› set (value doesn't matter).
`‹tag›[‹attr›="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute value is exactly equal to ‹val›.
`‹tag›[‹attr›~="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute value is a list of space-separated values, one of which is exactly equal to ‹val›.
`‹tag›[‹attr›\|="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute has a hyphen-separated list of values beginning (from the left) with ‹val›.

following are “pseudo-elements”.

pseudo-elements
Pattern	Meaning
`‹tag›:first-child`	Match the first child of a tag ‹tag›.
`‹tag›:link` `‹tag›:visited` `‹tag›:active` `‹tag›:hover` `‹tag›:focus`	Match links, visited links, or mouse hovers etc. In practice, they just match anchor tags (⁖ `<a href="xyz.html">xyz</a>`)
`‹tag›:lang(‹lang code›)`	Match element of type ‹tag› if it is in (human) language ‹lang code› (the document language specifies how language is determined).

CSS 3 added the following:

Pattern	Meaning
`‹tag›[‹attr›^="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute value begins with the string `"‹val›"`
`‹tag›[‹attr›$="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute value ends with the string `"‹val›"`
`‹tag›[‹attr›*="‹val›"]`	Match any ‹tag› element whose ‹attr› attribute value contains the string `"‹val›"`

Example: color Wikipedia links green:

a[href*="wikipedia.org/"] {color:green}

more pseudo-element matchers.

Pattern	Meaning
`‹tag›:root`	Match element ‹tag› that is root of document.
`‹tag›:nth-child(‹n›)`	Match element ‹tag› that is nth child of its parent.
`‹tag›:nth-last-child(‹n›)`	Match element ‹tag› that is nth child of its parent, counting from the last one.
`‹tag›:nth-of-type(‹n›)`	Match element ‹tag› that is nth child of the same type.
`‹tag›:nth-last-of-type(‹n›)`	Same as `‹tag›:nth-of-type(‹n›)` but counting from bottom.
`‹tag›:last-child`	Match element ‹tag› when ‹tag› is the last child of its parent.
`‹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-child`	Match element ‹tag› if it's the only child of its parent.
`‹tag›:only-of-type`	Match element ‹tag› if its type is unique among siblings.
`‹tag›:empty`	Match element ‹tag› that has no children (including text nodes)
`‹tag›:target`	Match element ‹tag› that is the target of the referring URI.
`‹tag›:enabled` `‹tag›:disabled`	a user interface element ‹tag› that is enabled or disabled
`‹tag›:checked` `‹tag›:disabled`	a user interface element ‹tag› which is checked (for instance a radio-button or checkbox)
`‹tag›:not(‹s›)`	Match element ‹tag› if it's that does not match simple selector ‹s›.