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.