CSS Level 4 selectors
All CSS selectors from level 1 to upcoming version 4. This is still a draft version. At this moment browser support for CSS4 is poor (latest Chrome scores only 32%). For future reference, W3C: " if you are looking for a stable Selectors specification, use Selectors 3 ".
| Pattern | Represents | Section | Level |
|---|---|---|---|
* | any element | §5.2 Universal selector | 2 |
E | an element of type E | §5.1 Type (tag name) selector | 1 |
E:not(s1, s2) | an E element that does not match either compound selector s1 or compound selector s2 | §4.3 The Negation Pseudo-class: :not() | 3/4 |
E:matches(s1, s2) | an E element that matches compound selector s1 and/or compound selector s2 | §4.2 The Matches-any Pseudo-class: :matches() | 4 |
E:has(rs1, rs2) | an E element, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope elements, match an element | §4.4 The Relational Pseudo-class: :has() | 4 |
E.warning | an E element belonging to the class warning (the document language specifies how class is determined). | §6.6 Class selectors | 1 |
E#myid | an E element with ID equal to myid. | §6.7 ID selectors | 1 |
E[foo] | an E element with a foo attribute | §6 Attribute selectors | 2 |
E[foo="bar"] | an E element whose foo attribute value isexactly equal to bar | §6 Attribute selectors | 2 |
E[foo="bar" i] | an E element whose foo attribute value isexactly equal to any (ASCII-range) case-permutation of bar | §6.3 Case-sensitivity | 4 |
E[foo~="bar"] | an E element whose foo attribute value isa list of whitespace-separated values, one of which is exactly equal to bar | §6 Attribute selectors | 2 |
E[foo^="bar"] | an E element whose foo attribute valuebegins exactly with the string bar | §6.2 Substring matching attribute selectors | 3 |
E[foo$="bar"] | an E element whose foo attribute valueends exactly with the string bar | §6.2 Substring matching attribute selectors | 3 |
E[foo*="bar"] | an E element whose foo attribute valuecontains the substring bar | §6.2 Substring matching attribute selectors | 3 |
E[foo|="en"] | an E element whose foo attribute value isa hyphen-separated list of values beginning with en | §6 Attribute selectors | 2 |
E:dir(ltr) | an element of type E in with left-to-right directionality (the document language specifies how directionality is determined) | §7.1 The Directionality Pseudo-class: :dir() | 4 |
E:lang(zh, "*-hant") | an element of type E tagged as being either in Chinese (any dialect or writing system) or othewise written with traditional Chinese characters | §7.2 The Language Pseudo-class: :lang() | 2/4 |
E:any-link | an E element being the source anchor of a hyperlink | §8.1 The Hyperlink Pseudo-class: :any-link | 4 |
E:link | an E element being the source anchor of a hyperlink of which the target is not yet visited | §8.2 The Link History Pseudo-classes: :link and :visited | 1 |
E:visited | an E element being the source anchor of a hyperlink of which the target is already visited | §8.2 The Link History Pseudo-classes: :link and :visited | 1 |
E:target | an E element being the target of the referring URL | §8.3 The Target Pseudo-class: :target | 3 |
E:scope | an E element being a designated reference element | §8.4 The Reference Element Pseudo-class: :scope | 4 |
E:current | an E element that is currently presented in a time-dimensional canvas | §10 Time-dimensional Pseudo-classes | 4 |
E:current(s) | an E element that is the deepest :current element that matches selector s | §10 Time-dimensional Pseudo-classes | 4 |
E:past | an E element that is in the past in a time-dimensional canvas | §10 Time-dimensional Pseudo-classes | 4 |
E:future | an E element that is in the future in a time-dimensional canvas | §10 Time-dimensional Pseudo-classes | 4 |
E:active | an E element that is in an activated state | §9 User Action Pseudo-classes | 1 |
E:hover | an E element that is under the cursor, or that has a descendant under the cursor | §9 User Action Pseudo-classes | 2 |
E:focus | an E element that has user input focus | §9 User Action Pseudo-classes | 2 |
E:drop | an E element that can possibly receieve a drop | §9.5 The Drag-and-Drop Pseudo-class: :drop and :drop() | 4 |
E:drop(active) | an E element that is the current drop target for the item being dragged | §9.5 The Drag-and-Drop Pseudo-class: :drop and :drop() | 4 |
E:drop(valid) | an E element that could receive the item currently being dragged | §9.5 The Drag-and-Drop Pseudo-class: :drop and :drop() | 4 |
E:drop(invalid) | an E element that cannot receive the item currently being dragged, but could receive some other item | §9.5 The Drag-and-Drop Pseudo-class: :drop and :drop() | 4 |
E:enabled | a user interface element E that is enabled or disabled, respectively | §11.1.1 The :enabled and :disabled Pseudo-classes | 3 |
E:read-writeE:read-only | a user interface element E that is user alterable, or not | §11.1.2 The Mutability Pseudo-classes: :read-only and :read-write | 3-UI/4 |
E:placeholder-shown | an input control currently showing placeholder text | §11.1.2 The Mutability Pseudo-classes: :read-only and :read-write | 3-UI/4 |
E:default | a user interface element E that is the default item in a group of related choices | §11.1.4 The Default-option Pseudo-class: :default | 3-UI/4 |
E:checked | a user interface element E that is checked/selected (for instance a radio-button or checkbox) | §11.2.1 The Selected-option Pseudo-class: :checked | 3 |
E:indeterminate | a user interface element E that is in an indeterminate state (neither checked nor unchecked) | §11.2.2 The Indeterminate-value Pseudo-class: :indeterminate | 4 |
E:validE:invalid | a user-input element E that meets, or doesn’t, its data validity semantics | §11.3.2 The Range Pseudo-classes: :in-range and :out-of-range | 3-UI/4 |
E:in-rangeE:out-of-range | a user-input element E whose value is in-range/out-of-range | §11.3.2 The Range Pseudo-classes: :in-range and :out-of-range | 3-UI/4 |
E:requiredE:optional | a user-input element E that requires/does not require input | §11.3.3 The Optionality Pseudo-classes: :required and :optional | 3-UI/4 |
E:user-error | a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required) | §11.3.4 The User-interaction Pseudo-class: :user-invalid | 4 |
E:root | an E element, root of the document | §12 Tree-Structural pseudo-classes | 3 |
E:empty | an E element that has no children (not even text nodes) | §12 Tree-Structural pseudo-classes | 3 |
E:blank | an E element that has no content except maybe white space | §12 Tree-Structural pseudo-classes | 4 |
E:nth-child(n [of S]?) | an E element, the n-th child of its parent matching S | §12.4 Child-indexed Pseudo-classes | 3 |
E:nth-last-child(n [of S]?) | an E element, the n-th child of its parent matching S, counting from the last one | §12.4 Child-indexed Pseudo-classes | 3 |
E:first-child | an E element, first child of its parent | §12.4 Child-indexed Pseudo-classes | 2 |
E:last-child | an E element, last child of its parent | §12.4 Child-indexed Pseudo-classes | 3 |
E:only-child | an E element, only child of its parent | §12.4 Child-indexed Pseudo-classes | 3 |
E:nth-of-type(n) | an E element, the n-th sibling of its type | §12.5 Typed Child-indexed Pseudo-classes | 3 |
E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting from the last one | §12.5 Typed Child-indexed Pseudo-classes | 3 |
E:first-of-type | an E element, first sibling of its type | §12.5 Typed Child-indexed Pseudo-classes | 3 |
E:last-of-type | an E element, last sibling of its type | §12.5 Typed Child-indexed Pseudo-classes | 3 |
E:only-of-type | an E element, only sibling of its type | §12.5 Typed Child-indexed Pseudo-classes | 3 |
E F or E >> F | an F element descendant of an E element | §13.1 Descendant combinator ( ) or (>>) | 1 or 4 |
E > F | an F element child of an E element | §13.2 Child combinator (>) | 2 |
E + F | an F element immediately preceded by an E element | §13.3 Next-sibling combinator (+) | 2 |
E ~ F | an F element preceded by an E element | §13.4 Following-sibling combinator (~) | 3 |
F || E | an E element that represents a cell in a grid/table belonging to a column represented by an element F | §14 Grid-Structural Selectors | 4 |
E:nth-column(n) | an E element that represents a cell belonging to the nth column in a grid/table | §14 Grid-Structural Selectors | 4 |
E:nth-last-column(n) | an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one | §14 Grid-Structural Selectors | 4 |