First Glimpse – W3C publish working draft of CSS4.

Along with the Selectors3 recommendations, today, the CSS working group published the first public working draft of Selectors Level 4 on the W3C site. Yes, that’s right, the first glipse of what eventually will become CSS4.

So what are the standout points of interest for designers and developers?

Selecting parent nodes of elements.

Potentially, select a parent of an element. Implemented via a dollar sign ($) you can change the subject of a selector, moving your way up the tree.

 $li > a { background: #eee }

The declaration therefore applies to <li>, not <a>.

Conditional Structual matching

Born primarily from browser specific extensions such as  (:-moz-any() or :-moz-any-link) Selectors4 adds many more: :nth-match(an+b of selector) for more conditioned structural matching, :matches() for less-verbose selector declaration. For pseudo classes:

*|*:matches(:hover, :focus)

This matches any element that is being hovered or focused, regardless of its namespace.

The :not operator

The following compound selector may represents all HTML elements except links.


Local Link Pseudo Class

The local link pseudo class is designed to give you the flexibility to determine how deep into a site you are from a URL perspective with CSS.

It will also provide selectors for the styling of external links with resorting to identifying these with server side code, or extra tags.

Given the links:
1. <a href="">Home</a>
2. <a href="">2011</a>
3. <a href="">March</a>
4.<a href="">March</a>

and the styles:
a:local-link {...}
a:local-link(0) {...}
a:local-link(1) {...}
a:local-link(2) {...}
a:local-link(3) {...}
If the document's URI is
Link 1 would receive Style 2
Link 2 would receive Styles 2 and 3
Link 3 would receive Styles 2, 3, and 4
Link 4 would receive Style 1

UI States Pseudo classes.

With user interface elements now having a number of uniform states, it makes sense for selectors to allow the styling directly on these. For example, with CSS4 the ability to determine if a checkbox is checked in the UI or not will be possible, and this bridge between interaction with standard elements and the visual display of them makes for an interesting development. Further information on the UI states pseudo classes here. Radio and checkbox elements can be toggled by the user. Some menu items are “checked” when the user selects them. When such elements are toggled “on” the :checked pseudo-class appliesFor example, all elements on the page which are currently ‘unchecked’ can be targeted as below.


As each version of CSS is released, the selector spec become more and more like a scripting language in its own right that, with a good understanding of how the dom works, you can do some pretty clever stuff with. Although this is very much a working draft, with no definite inclusions in the final spec,  with nth element selectors, and wilcards being used now, CSS is evolving to the point where we can rely less on client side libraries such as jQuery, and do alot of the heavy lifting right from the stylesheet – which is great news for cleaner markup.

Leave a Reply

Your email address will not be published. Required fields are marked *