What’s new in CSS 4 selectors
Join the DZone community and get the full member experience.
Join For FreeThe 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 forsection 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.
CSS
Element
Opinions expressed by DZone contributors are their own.
Comments