CSS 3 is still slowly making its way onto the web, but the World Wide Web Consortium (W3C), the governing body that oversees the development of web standards, is already plotting the future of CSS with CSS 4. The W3C recently released the first draft of CSS 4 adding dozens of new rules to make web developer’s lives easier.

The CSS 4 spec is brand new and no web browser actually supports any of these rules yet, but if you’re curious what the next few years will mean for CSS, the first draft offers a sneak peek at what’s in store for web developers.

The biggest news in the current draft of CSS 4 is support for the much-requested parent or “subject” selector. In CSS rules are typically applied to the innermost selected element. That is, given the chain body header h1, the actual CSS rule will be applied to the h1 element at the end of the chain. CSS 3 offers no way to, say, style the header tag but only if it has an h1 child element. CSS 4 changes that.

CSS 4 includes a means of controlling which element in the selection chain is actually being styled. The easiest way to understand the “subject” selector is by example. Say you want to style a list (ul), but only when the user has clicked on an item in the list. You add a class “clicked” to the item (ul li.clicked) when the user clicks on it, but how do you style the whole list from that class?

With the subject selector it’s simple:

$ul li.clicked {
    background: white;
}

The “$” means that the rule is applied to the ul, rather than the li.clicked as it normally would.

The dollar sign may not end up being the subject indicator and the exact syntax will likely change before the spec is finalized. But regardless of the way it ends up being implemented, the subject selector opens up a whole new realm of CSS possibilities.

Other highlights in CSS 4 include some new pseudo selectors like the :matches() pseudo-class which greatly simplifies the process of writing complex, nested CSS. For example you could write:

:matches(section, article, aside, nav) h1 {
  font-size: 3em;
}

The :matches() syntax eliminates the need to write out section h1, article h1 and so on. It’s handy for even simple nestings like the example above, but it becomes really powerful when you’re selecting elements that are two or three levels deep. For more info on :matches(), check out our earlier write up on Mozilla’s :any() selector, which is the basis for :matches().

Also new in CSS 4 is the :local-link pseudo-class which allows you to style links based on domain. For example you could style all internal links with a simple selector like a:local-link(0). The number refers to the amount of the local URL path to match. For example, if the current address is http://www.mysite.com/some/post/, a:local-link(0) would match anything point to http://www.mysite.com/, a:local-link(1) would match anything pointing to http://www.mysite.com/some/ and so on.

CSS 4 offers some handy pseudo-classes for styling user interface elements based on state, including :enabled, :disabled, :checked and half a dozen others.

For more info on what’s coming in CSS 4, check out the W3C spec (fear not, it’s surprisingly readable as specs go). Also worth a read is W3C WG member David Storey’s blog where he did a nice write up on CSS 4, including a few things not covered here, like the awesome-sounding “time-dimensional pseudo-classes.”

[CSS pumpkin by mauricesvay/CC/Flickr]

See Also: