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 |