The latest CSS Selectors Level 4 Working Draft was released on 29 September 2011. Lots of new and exciting additions in the Level 4 draft. Below is a walk-through of the new stuff in Selectors Level 4.
1. Compound Selector
There is now support for compound selector for negation and matches-any pseudo-class. Compound Selector allows us to select elements by group.
|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|
In the below example. the first two list items will be red, and the rest will be green.
2. The local link pseudo-class
:local-link pseudo-class allows authors to style links based on the users current location within a site.
|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|
If the page URL is http://www.example.com/2011/03/, Link 1 would receive Style 2. Link 2 would receive Styles 2 and 3.
3. ‘:nth-match()’ pseudo-class
:nth-match(an+b of selector-list) pseudo-class notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of
|E:nth-match(n of selector)||an E element, the n-th sibling matching selector||Structural pseudo-classes|
4. Grid-Structural pseudo-classes
Grid-Structural Selectors is used for 2D grid like tables. Below are the patterns:
|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|
The following example makes cells C, E, and G yellow.
5. Reference combinator
|E /foo/ F||an F element ID-referenced by an E element’s foo attribute||Reference combinator|
6. Determining the subject of a selector
We are all familiar with the pattern
E > F (CSS Selectors Level 2) which represents an F element child of an E element. There is also a way to do it another way around.
|$E > F||an E element parent of an F element||Determining the subject of a selector + Child combinator|
So by using
$E > F, we could select element
E as the subject.
7. Time-dimensional Pseudo-classes
Time-dimensional Pseudo-classes is a newly introduced set of classes that classify elements with respect to the currently-displayed or active position in a time-dimensional canvas, such as during speech rendering of an HTML document.
|E:current||an E element that is currently presented in a time-dimensional canvas||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|
For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:
8. The indeterminate-value pseudo-class ‘:indeterminate’
:indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown.
:checked pseudo-class, :indeterminate applies to all media. Components of a radio-group initialized with no pre-selected choice, for example, would be
:indeterminate even in a static display.
|E:indeterminate||a user interface element E that is in an indeterminate state (neither checked nor unchecked)||The indeterminate-value pseudo-class|
9. Attribute selectors: Case-sensitivity
The attribute selector may include the identifier
i immediately inside the closing bracket (
]). When this flag is present, UAs must match the attribute’s value case-insensitively within the ASCII range.
|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|
An example will be:
There are also some Level 4 selectors (noted as “3-UI”) were introduced in [CSS3UI]. You can learn more about them at:
The default option pseudo-class :default
The validity pseudo-classes
The optionality pseudo-classes
The mutability pseudo-classes
There are still errors, debate and incomplete information in the draft, if you would like to join the discussion, there is a public mailing list at email@example.com. The latest spec is at: http://www.w3.org/TR/2011/WD-selectors4-20110929/