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-rangeE:out-of-range This pseudo-class will only apply to those elements that have range limitations. The validity pseudo-classes
E:requiredE: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-onlyE: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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s