HTML and CSS Reference
In-Depth Information
CSS4 Selectors
Even though many CSS3 modules are still a long way from implementation, work has already begun on the CSS4
Selectors module ( ) . 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.
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:
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.
Search WWH ::

Custom Search