CSS Selectors Level 4: The Path to CSS4

Syed Fazle Rahman

Recently I had published an article on SitePoint showcasing different examples of the use of CSS3 2D and 3D transform. CSS3 excites us so much, you could be forgiven for thinking this is the most advanced version of CSS available.

Not so.

Even now, just as you are still learning to use CSS3 and HTML5, those talented folks at W3C have released a working draft of the Level 4 standards of CSS Selectors, creating a buzz that CSS4 is near.

Is CSS3 Obsolete Already?

Absolutely not! We have a lot to do before CSS3 is even in wide use and fully supported. The web is, however, in a constant state of progressive transformation. Selectors Level 4 is an editor’s draft released on January 16. It is intended for discussion only and should be regarded as a work in progress.

Note also that Level 4 of Selectors being under discussion does not equate to Version 4 of CSS being released.

What it does show us is various newer ways of using selectors in stylesheets. That these developments have reached Level 4 reveals some of what is likely to be included in CSS4. So we’re looking at a path toward CSS4, with a very long way to go.

In this article, I will try to highlight some of the most inetresting and potentially significant ways in which Level 4 Selectors might be used.

What are Selectors?

Selectors are pattern matching conditions in a tree structure of HTML. We’ve been using selectors since Level 1 of CSS. A selector can range from simple element names to complex representations. The level 4 document on selectors mostly comprises of pseudo-classes to add effects to them. It documents some cool and interesting features which I will explain.

Basic Examples of Selectors:

h1{ font-family: arial; } /* Element matching selector for matching heading1 statements */
a{ text-decoration: underline; } /* Element matching selector for hyperlinks in the documents */
h1, h2, h3{ font-color: blue; } /* combination of selectors */

Logical Combinations: :MATCHES and :NOT

Like Mozilla’s :-moz-any() pseudo-class, CSS finally has its own matching pseudo-class, :matches. Using :matches you can group and select elements. It is a functional pseudo-class which takes a selector’s list as an argument. In the level 4 selectors, you can only include compound selectors as the argument in :matches. Combinators like white spaces, greater than symbol, etc are not valid arguments.

You cannot even nest :matches within itself or within :not pseudo-class like :matches(:matches(…)) or :not(:matches()). These are invalid uses of :matches in the new specifications.

Instead of:

a:link, a:hover, a:visited, a:focus{
    color:red;
}

You can use:

a:matches(:link, :hover, :visited, :focus){
    color:red;
}

Though this looks simple, you can use it in various complicated ways when you have more elements to group like:

div:matches(.active, .visible, #main){
    background: blue;
}

Let’s see how to use the second logical combinator :not. It is a negation pseudo-class which takes a list of other selectors as arguments. Sometime we have more elements to apply a specific style and to leave out few elements in the list. You can use :not in such cases and pass the list of selectors you don’t want to apply a specific style.

h1:not(#title, .active){
    color: #F2F2F2;
}

The above code will give all h1 elements that are not #title and .active a color code #F2F2F2. Interesting isn’t?

Location Based Pseudo-classes :ANY-LINK and :LOCAL-LINK

Location based pseudo-classes gives you more power to design link elements. The Level 4 document states that this is a temporary name given and it may change in future. It represents any element that is a source anchor of hyperlink. It combines a:visited and a:link into one so you don’t have to write it twice.

For example:

a:link, a:visited{
    color: blue;
}

Can be re-written as:

a:any-link{
    color:blue;
}

The above code will color all the link elements blue whether they have been visited or not.

Another very interesting feature added in this document is :local-link. Using this you can apply styles those links which point to the current document. This will help web designers to give a different look to those links which are local and don’t open any different web page.

a:local-link{
    color: green;
}

You can also match the level of local link url using parameters in the :local-link. For example:

a:local-link(0){
    color: #888888;
}

a:local-link(1){
    color: green;
}

a:local-link(2){
    color: blue;
}

Let me explain you more clearly with the help of a sample link: http://www.sitepoint.com/tag/css/

  1. Link http://www.sitepoint.com will be colored #888888 according to above style.
  2. Link http://www.sitepoint.com/tag/ will be colored green and
  3. Link http://www.sitepoint.com/tag/css/ will be colored blue.

Three-Dimension Pseudo-Classes: :CURRENT, :PAST and :FUTURE

These pseudo classes give three dimensional effects to the text in webpages. You can use it to highlight the portion of the webpages currently being read in a speech. For example:

:current(p, li, dt, dd) {
    background: yellow;
}

The :past pseudo-class represent text portion prior to :current portion and :future pseudo-class represent the next portion. Highlighting and blurring text using these pseudo-classes will give readers a comfortable view of the document.

Grid-Structural Pseudo-classes: :COLUMN, :NTH-COLUMN and :NTH-LAST-COLUMN

Column based designing was already introduced in CSS3 but designing each column of a webpage was difficult. With the introduction of grid-structural pseudo-classes, designers will surely find it easier to give different styles to different columns of a document.

For example:

:column(.full){
    background: #F2F2F2;
}

.nth-column(odd){
    color: #999999;
}

In the above code, the background of all the columns of .full will be changed to #F2F2F2 and odd columns will have color code #999999.

Parent Selector

I believe this is the most important addition to the list of all new selectors.

Designers had been complaining about lost focus of the parent element when the child element is active. It was impossible to apply dynamic styles to the parent element when the child had a focus.

For example, in case of designing a drop down menu when the focus was on the lowest level li element, the main parent li element always lost its focus. In ul li a.active the focus was on the link element instead of li. With the help of parent selector, you can now tell the browser that you want to apply style to the li instead of a. Let us check out a working example.

ul li! a.active {
    color: red;
}

The li element was made red in color instead of a:active in the above code.

body! header a:hover {
    background: red;
}

The body was given style instead of the link element in the above snippet.

Conclusion

Now that we have seen the new level of the Selectors in CSS, I am personally very eager to use them in my projects. However, we will all have to wait some time before they are implemented in our browsers.

Selectors have been the most important members of the CSS family. Now with introduction of Level 4 document they have proved their importance once again.

For details of all the changes, you can go to the full documentation in the W3C website for more reference.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Patrick

    I’m not sure why anyone would find this list impressive, or even necessary. Apart from the parent selector, :matches and :not, these selectors seem target to unusual edge cases rather than mainstream design problems. Nested selectors would be a truly powerful tool which would revolutionise the way we write CSS, giving us more logical, readable, and compact stylesheets. In fact, nested selectors would render parent, :matches and :not unnecessary. But I guess it’s unrealistic to expect the W3C to be that helpful.

    Of course, we already have nested selectors thanks to CSS preprocessors like LESS, SASS and Stylus. With these tools, we also have variables, math, mixins, conditionals, functions and iteration available to us, and it all compiles down to plain CSS which works in any browser. And since it will take many years for any new selectors to be viable, I’m not sure what the W3C is trying to accomplish – it seems that their intent is to give us worse versions of tools we already have, long after better solutions have already been found.

    So I suppose these new selectors may be of some use to some designers in about 5 years, but I’m really not at all impressed.

  • http://www.charlesmudy.com/ Shina

    Very cool, I like the :matches

  • http://www.venturerepublic.net/services/ Venture web development

    Very well defined Fazle Rehman. Love this Article. Thanks for share.

  • http://www.andrewhbridge.co.uk/ Andrew Bridge

    I’d agree with Patrick, this isn’t an amazing list. Seems like it’s trying to be a premature version of “Learning to Love the Boring Bits of CSS” (http://alistapart.com/article/love-the-boring-bits-of-css) for level 4 standards.

    I’m also surprised to see the use of the acronym “CSS4″, we’re no longer looking at these CSS Levels to all progress at the same pace, some of the HTML and CSS levels are already at Level 4 and some are even being implemented, while some Level 3 standards haven’t been entirely solidified.

    If CSS is implemented on a single, rigid upgrade cycle, we won’t see any change for years, any form of CSS4 won’t be finished any time soon. If we instead look at each specification on it’s own (just Selectors Level 4 is finalised for instance, rather than waiting for the other specs to mature), the pace of change in CSS can be far quicker.

    Tab Atkins wrote a great post about this back in September (http://www.xanthir.com/b4Ko0).

  • http://briankardell.wordpress.com Brian

    If you are eager to play with richer selectors in your css (including many of these) check out hitchjs, it provides a prollyfill engine that allows you to use additonal/proposed selectors like these in your CSS.

    Its worth noting a few things on your article: Work on CSS 3 began more than a decade ago, and it included some of these selector ideas (even in more powerful forms) way back then. Lots and lots of stuff didn’t ultimately make it. For a year or two there has been a Selectors Level 4 wiki / draft and there is even now a selectors level 5+ wiki. Keep in mind that CSS itself is now modular, so there is no sense at which point you will have “CSS 4″.

    What you are calling “parent” comes originally from a proposal for a pseudo class :has(selector) which is considerably more powerful – but neither of them is about “parent” and that is a really misleading term that we need to work to correct. It is either (depending on which proposal) about choosing the subject or a more generic ability to consider a common ancestor axis. Until now, the subject of a selector has always been indicated by the right-most token and a linear path of consideration was indicated to the left. Because of progressive rendering, CSS engines take full advantage of this in order to make it practical – during the load of a page, millions and millions of checks are performed and the linear ancestry design allowed for some pragmatic optimizations. So aside from the definition itself, I think it is important First, because it is probably the single most requested feature I’ve seen and has been for just about as long as there has been CSS. Second, because it has been booted down the road before and there is no real indication that it wont be moved from 4 to 5. Finally, because it really isn’t fully settled just how it will work and since it creates new problems for optimization it is a lot of work that no one seems to be rushing to implement. Until we really get far down the road, it’s still pretty subject to change – for example – there have been proposals to change the names or syntax of many of the ones in your article (local-link, matches, has at least).

    I am also not sure what you are saying with the three dimensional reference above you might want to rephrase that.

    More powerful selectors and scoping are necessary for css to really reach its potential in html, so I am glad people are really looking forward to using them and I think that is why trying their effects early and providing feedback and new use cases is critical to their success.

  • Tom Wardrop

    I really hope this isn’t the best they can come up with. Parent selector is really the only new capability that web developers actually want. All the others are cumbersome shortcuts that add more syntax and a greater learning curve for no new capabilities.

    Parent selectors, nested classes, and perhaps the introduction of variables and mathematical capabilities, and even functions (e.g. brightness, saturation, etc – things to modify variables). That’s what designers want. I mean, how painful is it to have a blue theme; a theme consisting of many shades of blue, but all with the same hue. If you want to create a pink think, you’d have to change every shade of blue, where as with variables and color functions, you’d only have to change one variable.

    • Drew G

      Tom,

      Doesn’t CSS preprocessors provide most of those requested features you’re asking for. They can be used now and don’t rely on browser implementation. That’s a winning situation. Adding those features to CSS would also result in more “syntax and greater learning curve” and take years to implement. It might eventually happen but it doesn’t need to (with preprocessors already available).

      Also note that this article isn’t displaying all the new features of CSS4; it’s just a preview of the new selectors.

  • http://thietkewebtopx.com/ Lenny Ha

    This knowledge will be useful in the application of the CSS code more concise display

  • http://www.mattearly.com Matt Early

    Do you think that CSS3 will be totally supported before we start seeing CSS4 go mainstream? Matt

  • Kenny Landes

    It’s good to see things moving forward, and with most browsers updating in rapid iteration, we can employ finished parts of the spec before it is fully released, as is the case with CSS3. Hopefully Microsoft will get on board with frequent update cycles so that IE can be less problematic in the future. *clicking heals together*

  • Bharti Gurav

    Very nice but i still see that css is not that advanced to handle centering the text vertically inside a block…

    • megasteve4

      +1