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 ".

 

PatternRepresentsSectionLevel
*any element§5.2 Universal selector2
Ean element of type E§5.1 Type (tag name) selector1
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.warningan E element belonging to the class warning (the document language specifies how class is determined).§6.6 Class selectors1
E#myidan E element with ID equal to myid.§6.7 ID selectors1
E[foo]an E element with a foo attribute§6 Attribute selectors2
E[foo="bar"]an E element whose foo attribute value is
exactly equal to bar
§6 Attribute selectors2
E[foo="bar" i]an E element whose foo attribute value is
exactly equal to any (ASCII-range) case-permutation of bar
§6.3 Case-sensitivity4
E[foo~="bar"]an E element whose foo attribute value is
a list of whitespace-separated values, one of which is
exactly equal to bar
§6 Attribute selectors2
E[foo^="bar"]an E element whose foo attribute value
begins exactly with the string bar
§6.2 Substring matching attribute selectors3
E[foo$="bar"]an E element whose foo attribute value
ends exactly with the string bar
§6.2 Substring matching attribute selectors3
E[foo*="bar"]an E element whose foo attribute value
contains the substring bar
§6.2 Substring matching attribute selectors3
E[foo|="en"]an E element whose foo attribute value is
a hyphen-separated list of values beginning with en
§6 Attribute selectors2
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-linkan E element being the source anchor of a hyperlink§8.1 The Hyperlink Pseudo-class: :any-link4
E:linkan 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 :visited1
E:visitedan 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 :visited1
E:targetan E element being the target of the referring URL§8.3 The Target Pseudo-class: :target3
E:scopean E element being a designated reference element§8.4 The Reference Element Pseudo-class: :scope4
E:currentan E element that is currently presented in a time-dimensional canvas§10 Time-dimensional Pseudo-classes4
E:current(s)an E element that is the deepest :current element that
matches selector s
§10 Time-dimensional Pseudo-classes4
E:pastan E element that is in the past in a time-dimensional canvas§10 Time-dimensional Pseudo-classes4
E:futurean E element that is in the future in a time-dimensional canvas§10 Time-dimensional Pseudo-classes4
E:activean E element that is in an activated state§9 User Action Pseudo-classes1
E:hoveran E element that is under the cursor,
or that has a descendant under the cursor
§9 User Action Pseudo-classes2
E:focusan E element that has user input focus§9 User Action Pseudo-classes2
E:dropan 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
E:disabled
a user interface element E that is enabled or disabled, respectively§11.1.1 The :enabled and :disabled Pseudo-classes3
E:read-write
E:read-only
a user interface element E that is user alterable, or not§11.1.2 The Mutability Pseudo-classes: :read-only and :read-write3-UI/4
E:placeholder-shownan input control currently showing placeholder text§11.1.2 The Mutability Pseudo-classes: :read-only and :read-write3-UI/4
E:defaulta user interface element E that is the default item in a group of related choices§11.1.4 The Default-option Pseudo-class: :default3-UI/4
E:checkeda user interface element E that is checked/selected
(for instance a radio-button or checkbox)
§11.2.1 The Selected-option Pseudo-class: :checked3
E:indeterminatea user interface element E that is in an indeterminate state
(neither checked nor unchecked)
§11.2.2 The Indeterminate-value Pseudo-class: :indeterminate4
E:valid
E: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-range3-UI/4
E:in-range
E: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-range3-UI/4
E:required
E:optional
a user-input element E that requires/does not require input§11.3.3 The Optionality Pseudo-classes: :required and :optional3-UI/4
E:user-errora 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-invalid4
E:rootan E element, root of the document§12 Tree-Structural pseudo-classes3
E:emptyan E element that has no children (not even text nodes)§12 Tree-Structural pseudo-classes3
E:blankan E element that has no content except maybe white space§12 Tree-Structural pseudo-classes4
E:nth-child(n [of S]?)an E element, the n-th child of its parent matching S§12.4 Child-indexed Pseudo-classes3
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-classes3
E:first-childan E element, first child of its parent§12.4 Child-indexed Pseudo-classes2
E:last-childan E element, last child of its parent§12.4 Child-indexed Pseudo-classes3
E:only-childan E element, only child of its parent§12.4 Child-indexed Pseudo-classes3
E:nth-of-type(n)an E element, the n-th sibling of its type§12.5 Typed Child-indexed Pseudo-classes3
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-classes3
E:first-of-typean E element, first sibling of its type§12.5 Typed Child-indexed Pseudo-classes3
E:last-of-typean E element, last sibling of its type§12.5 Typed Child-indexed Pseudo-classes3
E:only-of-typean E element, only sibling of its type§12.5 Typed Child-indexed Pseudo-classes3
E F or E >> Fan F element descendant of an E element§13.1 Descendant combinator ( ) or (>>)1 or 4
E > Fan F element child of an E element§13.2 Child combinator (>)2
E + Fan F element immediately preceded by an E element§13.3 Next-sibling combinator (+)2
E ~ Fan F element preceded by an E element§13.4 Following-sibling combinator (~)3
F || Ean E element that represents a cell in a grid/table
belonging to a column represented by an element F
§14 Grid-Structural Selectors4
E:nth-column(n)an E element that represents a cell belonging to the nth column in a grid/table§14 Grid-Structural Selectors4
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 Selectors4

Leave a Reply