Get ready for CSS4 selectors

CSS4 has some advanced and cool selectors, which can be very useful for developers. I can't wait to use those new selectors!

Pattern Meaning W3C Section
E:not(s1, s2)
an `E` element that does not match either compound selector `s1` or compound selector `s2` Negation pseudo-class
E:matches(s1, s2)
an `E` element that matches compound selector s1 and/or compound selector s2 Matches-any pseudo-class
E[foo="bar" i]
an `E` element whose `foo` attribute value is exactly equal to any (ASCII-range) case-permutation of `bar` Attribute selectors: Case-sensitivity
E:local-link
an `E` element being the source anchor of a hyperlink of which the target is the current document The local link pseudo-class
E:local-link(0)
an `E` element being the source anchor of a hyperlink of which the target is within the current domain The local link pseudo-class
E:current
an `E` element that is currently presented in a time-dimensional canvas, such as during speech rendering. Time-dimensional Pseudo-classes
E:current(s)
an `E` element that is the deepest `:current` element that matches selector `s` Time-dimensional Pseudo-classes
E:past
an `E` element that is in the past in a time-dimensional canvas Time-dimensional Pseudo-classes
E:future
an `E` element that is in the future in a time-dimensional canvas Time-dimensional Pseudo-classes
E:indeterminate
a user interface element `E` that is in an indeterminate state (neither checked nor unchecked) The indeterminate-value pseudo-class
E:default
This pseudo-class applies to those elements that applies on the default elementsAccording to the spec, the :default pseudo-class must follow into one of those categories:
  • <button> - The default button of a form element is the first submit button in tree order which associates to that form.
  • <input> whose type is submit button or image button, and it's their forms' default
  • <input> elements that with checked attribute
  • <option> elements that have selected attribute
The default option pseudo-class :default
E:in-range
E:out-of-range
This pseudo-class will only apply to those elements that have range limitations. The validity pseudo-classes
E:required
E:optional
This pseudo-class will apply to those elements that has required/optional attribute. This pseudo-class is very useful for developers to highlight the required fields in form. The optionality pseudo-classes
E:read-only
E:read-write
A pseudo-class for detecting those elements that with/without readonly attribute. The mutability pseudo-classes
E:nth-match(n of selector)
an `E` element, the n-th sibling matching selector Structural pseudo-classes
E:nth-match(n of selector)
an `E` element, the n-th sibling matching selector Structural pseudo-classes
E:column(selector)
an `E` element that represents a cell in a grid/table belonging to a column represented by an element that matches selector Grid-Structural pseudo-classes
E:nth-column(n)
an `E` element that represents a cell belonging to the nth column in a grid/table Grid-Structural pseudo-classes
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 Grid-Structural pseudo-classes
E /foo/ F
an `F` element ID-referenced by an `E` element's `foo` attribute Reference combinator
$E > F
an `E` element parent of an `F` element. (This selector is awesome! Is that possible to have `$E F` in the future? So we can get the ancestor node. ;-)) Determining the subject of a selector + Child combinator