CSS uses selectors to find elements in the document tree. Selectors are simply patterns used to select the elements you want to style.
Selector represents a structure. This structure can be used as a condition that determines which elements a selector matches in the document tree.
| Selector | Description | CSS |
|---|---|---|
* | Universal element, any element | 2 |
E | An element of type E | 1 |
E F | Selects an F element descendant of an E element | 1 |
E, F | selects an E and F element | 1 |
E > F | Selects an F element child of an E element | 2 |
E + F | Selects an F element immediately preceded by an E element | 2 |
E ~ F | Selects an F element preceded by an E element | 3 |
[foo] | Selects element with a “foo” attribute | 2 |
[foo="bar"] | Selects element whose “foo” attribute value is exactly equal to “bar” | 2 |
[foo~="bar"] | Selects element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” | 2 |
[foo^="bar"] | Selects element whose “foo” attribute value begins exactly with the string “bar” | 3 |
[foo$="bar"] | Selects element whose “foo” attribute value ends exactly with the string “bar” | 3 |
[foo*="bar"] | Selects element whose “foo” attribute value contains the substring “bar” | 3 |
[foo|="en"] | Selects element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” | 2 |
:root | Selects the root of the document | 3 |
:nth-child(n) | Selects a user interface element which is enabled or disabled element, the n-th child of its parent | 3 |
:nth-last-child(n) | Selects a user interface element which is enabled or disabled element, the n-th child of its parent, counting from the last one | 3 |
:nth-of-type(n) | Selects a user interface element which is enabled or disabled element, the n-th sibling of its type | 3 |
:nth-last-of-type(n) | Selects a user interface element which is enabled or disabled element, the n-th sibling of its type, counting from the last one | 3 |
:first-child | Selects a user interface element which is enabled or disabled element, the first child of its parent | 2 |
:last-child | Selects a user interface element which is enabled or disabled element, the last child of its parent | 3 |
:first-of-type | Selects a user interface element which is enabled or disabled element, the first sibling of its type | 3 |
:last-of-type | Selects a user interface element which is enabled or disabled element, the last sibling of its type | 3 |
:only-child | Selects a user interface element which is enabled or disabled element, the only child of its parent | 3 |
:only-of-type | Selects a user interface element that is enabled or disabled element, the only sibling of its type | 3 |
:empty | Selects a user interface element that is enabled or disabled element that has no children | 3 |
:link | Selects unvisited links | 1 |
:visited | Selects visited links | 1 |
:active | Selects active links | 1 |
:hover | Selects on mouseover | 1 |
:focus | Selects element which has a focus | 2 |
:target | Selects element being the target of the referring URI | 3 |
:lang(en) | Selects element in language “en” | 2 |
:enabled | Selects a user interface element that is enabled | 3 |
:disabled | Selects a user interface element that is disabled | 3 |
:checked | Selects a user interface element that is checked | 3 |
:first-line | Selects the first formatted line of an element | 1 |
:first-letter | Selects the first formatted letter of an element | 1 |
:before | Selects generated content before an element | 2 |
:after | Selects generated content after an element | 2 |
.myclass | Selects element whose class is “myclass” | 1 |
#myid | Selects element with ID equal to “myid” | 1 |
:not(s) | Selects element that does not match simple selector s | 3 |
::selection | Selects the portion of an element that is selected by a user | 3 |
In CSS1 and CSS2, pseudo-elements start with a colon :, just like pseudo-classes. In CSS3, pseudo-elements start with a double colon ::, which differentiates them from pseudo-classes.
