What’s new in CSS 4 selectors

[2011-12-13] css, dev, html, webdev

The following are the highlights of what is new in CSS 4 selectors:

Determining the subject of a selector. Currently, if a selector consists of several compound selectors, the last one is considered its subject. The subject determines what elements the rule applies to. CSS 4 allows one to make any compound selector the subject, by prepending a dollar sign. For example:
```
    $ul li:hover {
        color: green;
    }
```
Here, if one hovers over a list element, the whole list will turn green. This is a great and dearly needed feature.
Pseudo-class :nth-match(). Lets you apply a rule to every n-th match for a given selector list.
```
    :nth-match(an+b of selector-list)
```
Previously, you could only access every n-th child. This selector gives you more flexibility.
UI states pseudo-classes allow you to style elements depending on their user interface state. Examples: :disabled, :checked (radio elements, checkbox elements, menu items, etc.), :in-range (for input elements with range limitations).

    :matches(section, article, aside) h1 {
        font-size: 3em;
    }

The above selector is an abbreviation for

    section h1, article h1, aside h1

The contextual reference element pseudo-class ‘:scope’. When you use selectors to query for elements, you can start your search in a list of elements that is iterated over, one element at a time. :scope is a placeholder for the current element. Example:
```
    document.querySelector(":scope > ul > li", elems)
```
The above returns all list items that are direct children of unordered lists that are direct children of the elements in elems.

More details (partial source of this post): “Discover What’s New in CSS 4 [selectors]” by Scott Gilbertson for Webmonkey.