CSS Selectors Level 4: The Path to CSS4

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: https://www.sitepoint.com/tag/css/

1. Link https://www.sitepoint.com will be colored #888888 according to above style.
2. Link https://www.sitepoint.com/tag/ will be colored green and
3. Link https://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.

Frequently Asked Questions about CSS Selectors Level 4