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.
| 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”.
| 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). |
http://www.w3.org/TR/REC-CSS2/selector.html
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›. |
http://www.w3.org/TR/selectors/