What’s 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.

Source: http://www.2ality.com/2011/12/css4-selectors.html