CSS Selectors - Grouped by Specification
Full list of CSS selectors, grouped by the CSS specification that they were introduced in.
CSS Level 1
These are the CSS selectors that were introduced in CSS Level 1.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E
| Selects an element of type E |
| 1 |
E.classname
| Selects an E element belonging to the class named classname .
|
| 1 |
E#myid
| Selects an E element with an ID of myid .
|
| 1 |
E:link
| Selects an E element being the source anchor of a hyperlink of which the target is not yet visited. |
| 1 |
E:visited
| Selects an E element being the source anchor of a hyperlink of which the target is already visited. |
| 1 |
E:active
| Selects an E element that is in an activated state. |
| 1 |
CSS Level 2
These are the CSS selectors that were introduced in CSS Level 2.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
*
| Selects all elements. |
| 2 |
E[foo]
| Selects an E element with a foo attribute.
|
| 2 |
E[foo="bar"]
| Selects an E element whose foo attribute value is exactly equal to bar .
|
| 2 |
E[foo~="bar"]
| Selects an E element whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to bar .
|
| 2 |
E[foo|="fruit"]
| Selects an E element whose foo attribute value is a hyphen-separated list of values beginning with en .
|
| 2 |
E:hover
| Selects an E element that is under the cursor, or that has a descendant under the cursor. |
| 2 |
E:focus
| Selects an E element that has user input focus. |
| 2 |
E:first-child
| Selects an E element, first child of its parent. |
| 2 |
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 |
CSS Level 2/Selectors Level 4
These are the CSS selectors that were introduced in Selectors Level 2, then updated in Selectors Level 4.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E:lang(zh, "*-hant")
| Selects an element of type E tagged as being either in Chinese (any dialect or writing system) or othewise written with traditional Chinese characters. Simply replace zh with the applicable language code, and *-hant with the applicable character code.
|
| 2/4 |
Selectors Level 3
These are the CSS selectors that were introduced in Selectors Level 3.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E[foo^="bar"]
| Selects an E element whose foo attribute value begins exactly with the string bar .
|
| 3 |
E[foo$="bar"]
| Selects an E element whose foo attribute value ends exactly with the string bar .
|
| 3 |
E[foo*="bar"]
| Selects an E element whose foo attribute value contains the substring bar .
|
| 3 |
E:target
| Selects an E element being the target of the referring URL. For example, the following selector could be used to apply an orange background color to any section that is the current target as specified in the URL. So if the document's markup includes |
CSS: HTML: This section will have an orange background whenever the URL includes | 3 |
E:enabled
| Selects a user interface element E that is enabled. |
| 3 |
E:disabled
| Selects a user interface element E that is disabled. |
| 3 |
E:checked
| Selects a user interface element E that is checked/selected (for example, a radio-button or checkbox). Can be used to style the element's label. |
| 3 |
E:root
| Selects an E element, root of the document. In most cases, when using HTML this will match the |
| 3 |
E:empty
| Selects an E element that has no children (not even text nodes). |
| 3 |
E:nth-child(n [of S]?)
| Selects an E element, the n-th child of its parent matching S. |
| 3 |
E:nth-last-child(n [of S]?)
| Selects an E element, the n-th child of its parent matching S, counting from the last one. |
| 3 |
E:last-child
| Selects an E element, last child of its parent. |
| 3 |
E:only-child
| Selects an E element, only child of its parent. |
| 3 |
E:nth-of-type(n)
| Selects an E element, the n-th sibling of its type. |
| 3 |
E:nth-last-of-type(n)
| Selects an E element, the n-th sibling of its type, counting from the last one. |
| 3 |
E:first-of-type
| Selects an E element, first sibling of its type. |
| 3 |
E:last-of-type
| Selects an E element, last sibling of its type. |
| 3 |
E:only-of-type
| Selects an E element, only sibling of its type. |
| 3 |
E ~ F
| Selects an F element preceded by an E element. |
| 3 |
Selectors Level 3/4
These are the CSS selectors that were introduced in Selectors Level 3, then updated in Selectors Level 4.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E:not(s1, s2)
| Selects an E element that does not match either s1 or s2. |
| 3/4 |
Selectors Level 3-UI/4
These are the Level 4 selectors that were introduced in Selectors Level 3-UI.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E:read-write
| Selects a user interface element E that is user alterable. For example, an HTML |
| 3-UI/4 |
E:read-only
| Selects a user interface element E that is not user alterable. For example, an HTML |
| 3-UI/4 |
E:placeholder-shown
| Selects an input control currently showing placeholder text. This allows you to style the placeholder text. For example, change its color, etc. |
| 3-UI/4 |
E:default
| Selects a user interface element E that is the default item in a group of related choices. For example, it could select the initially selected |
| 3-UI/4 |
E:valid
| Selects a user-input element E that meets its data validity semantics. |
| 3-UI/4 |
E:invalid
| Selects a user-input element E that doesn't meet its data validity semantics. |
| 3-UI/4 |
E:in-range
| Selects a user-input element E whose value is in-range. |
| 3-UI/4 |
E:out-of-range
| Selects a user-input element E whose value is out-of-range. |
| 3-UI/4 |
E:required
| Selects a user-input element E that requires input. For example, a form element with the |
| 3-UI/4 |
E:optional
| Selects a user-input element E that does not require input. For example, a form element without the |
| 3-UI/4 |
Selectors Level 4
These are the CSS selectors that were introduced in Selectors Level 4.
Selector | Description | Example | CSS / Selector Level |
---|---|---|---|
E:matches(s1, s2)
| Selects an E element that matches s1 and/or s2. |
| 4 |
E:has(rs1, rs2)
| Selects an E element, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope elements, match an element. |
| 4 |
E[foo="bar" i]
| Selects an E element whose So for example, |
| 4 |
E:dir(ltr)
| Selects an element of type E in with left-to-right directionality (the document language specifies how directionality is determined). |
| 4 |
E:any-link
| Selects an E element being the source anchor of a hyperlink. This is the equivalent of using both the |
| 4 |
E:scope
| Selects an E element being a designated reference element. |
| 4 |
E:current
| Selects an E element that is currently presented in a time-dimensional canvas. For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the current item as it is being read out. |
| 4 |
E:current(s)
| Selects an E element that is the deepest :current element that matches selector s.
|
| 4 |
E:past
| Selects an E element that is in the past in a time-dimensional canvas. For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have already been read out. |
| 4 |
E:future
| Select an E element that is in the future in a time-dimensional canvas. For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have yet to be read out. |
| 4 |
E:drop
| Selects an E element that can possibly receive a drop. For example, in HTML you can specify a drop target with the |
| 4 |
E:drop(active)
| Selects an E element that is the current drop target for the item being dragged. In other words, if the user were to release the drag, the element would be dropped on to this drop target. |
| 4 |
E:drop(valid)
| Selects an E element that could receive the item currently being dragged. It only matches if the drop target is valid for the object currently being dragged. For example, the HTML |
| 4 |
E:drop(invalid)
| Selects an E element that cannot receive the item currently being dragged, but could receive some other item. |
| 4 |
E:indeterminate
| Selects a user interface element E that is in an indeterminate state (neither checked nor unchecked). Can be used to style the element's label. |
| 4 |
E:user-error
| Selects a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required). |
| 4 |
E:blank
| Selects an E element that has no content except maybe white space. Similar to |
| 4 |
E F
| Selects an F element descendant of an E element. |
| 1 |
E >> F
| Selects an F element descendant of an E element. Note that this selector does the same thing as the previous selector ( |
| 4 |
F || E
| Selects an E element that represents a cell in a grid/table belonging to a column represented by an element F. |
| 4 |
E:nth-column(n)
| Selects an E element that represents a cell belonging to the nth column in a grid/table. |
| 4 |
E:nth-last-column(n)
| Selects an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one. |
| 4 |