First Glimpse – W3C publish working draft of CSS4.

September 29, 20112 Comments
Facebook Twitter Pinterest Plusone

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.

html|*:not(:link):not(:visited)

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="http://www.example.com">Home</a>
2. <a href="http://www.example.com/2011">2011</a>
3. <a href="https://www.example.com/2011/03">March</a>
4.<a href="http://www.example.com/2011/03/">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 http://www.example.com/2011/03/:
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.

:not(:checked)

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.

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (2)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. First Drafts of CSS4 and History of CSS | October 26, 2011
  1. Russell Bishop says:

    Glimpse* ?

Leave a Reply

Back to Top