2011-12-13

What’s new in CSS 4 selectors

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).
  • The matches-any pseudo-class :matches(). Example:
        :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.

No comments: