What Next? - Beginning CSS3 - page 509

CSS4 Selectors
Even though many CSS3 modules are still a long way from implementation, work has already begun on the CSS4
Selectors module ( http://dev.w3.org/csswg/selectors4/ ) . Among the new selectors being planned, two stand
out as being particularly useful. One is the :matches() pseudo-class. The other lets you select a parent element.
The :matches() pseudo-class takes as its argument a list of selectors and matches any of them. This is
extremely useful in situations where you need to repeat the same ancestor or parent multiple times in a
group selector. For example, flex_layout.html uses the following group selector to target <section> , <nav> ,
and <aside> elements that are direct children of a <div> with the ID main :

#main>section, #main>nav, #main>aside

This involves repeating #main> three times. With the :matches() pseudo-class, this group selector can be
rewritten like this:

#main>:matches(section, nav, aside)

In this rather trivial example, it doesn't save much typing, but group selectors can become extremely
verbose. Let's say you want special link styles for the <nav> and <aside> elements, the group selector currently
looks like this:

#main>nav a:link, #main>nav a:visited,
#main>aside a:link, #main>aside a:visited

With :matches() , it can be reduced to this:

#main>:matches(nav, aside) a:matches(:link, :visited)

■ At the time of this writing, WebKit-based browsers and Firefox support the same functionality as
:matches() using the nonstandard :-webkit-any() and :-moz-any() pseudo-classes.

Tip

The other change to selectors that looks particularly significant is what I like to think of as the “parent”
selector. It's not officially called that, but it describes what it does. Descendant and child selectors target styles
at elements nested inside another element, but there's currently no way of styling a parent element. Let's say,
for example, that you link to a heading inside a page using a URL fragment, you can style the heading with the
:target pseudo-class with the following selector:

h3:target

But what if you could style the whole <div> or <article> that you've just linked to rather than just
the heading?
The CSS4 Selectors module proposes letting you determine the subject of a selector , in effect turning a child
selector into a parent selector. The first draft of the specification proposed prefixing the subject with a dollar sign
( $ ). This has since changed to an exclamation mark ( ! ), and it might change yet again. However, this is how it's
proposed to identify the parent <div> of a heading that's the target of a link:

! div>h3:target

This would apply the styles to the <div> rather than to the <h3> heading.