CSS4, What’s coming

About CSS specification

The CSS team recently published first commercial working draft of CSS4. The CSS spec changed just after the release of CSS3. As we know CSS3 is making its way slowly and suddenly W3C launched first official draft of CSS4. So, CSS3 and CSS4 may go hand in hand. Demand for new module makes CSS4 to start their release early. Selector module is an example of it.

New things about CSS4


The first thing we can notice in CSS4 is Pseudo-elements are absent. Don’t worry though, pseudo elements will be there in the future releases of CSS4. New spec might come into different module, or they can merge it into previous modules itself.

UI state pseudo-classes

This class allows you to implement style elements depending on their state and checked items like radio elements, checkbox elements and half a dozen more.

Determining the subject of a selector

In CSS3, if single selector comprises of several other compound selectors, then the last one is considered as its subject. The main function of subject is to determining rules to the elements. But in CSS4 you can make any compound selector as a subject. This is the biggest news in a stream breeze of CSS 4.

The nth-match function

The nth-match() function gives you a freedom to apply a rule to n-th match to the given selectors.

e.g :nth-match(an+b of selector-list)

In early versions, we could only able to give rules to n-th child only. With CSS4 we have more flexibility.

Styling the links

In CSS 4 we have newly designed pseudo class :local-link which allows us to style links based on domain. For example we could actually style each internal link with the help oflocal-link(0).

Reference combinators

These combinators allow us to select elements that are referenced by ID of another element. With the help of different types of combinators that are present in CSS4 we can reference to corresponding element easily.

Reference element pseudo-class ‘:scope’

We can use selectors to query for elements, and then search starts by means of iterator searching one element at a time. And ‘:scope’ is a holder of current searched element.

The :matches()Selector

With the help of :matches selector class we can greatly reduce the complexity level of writing nested CSS. The syntax of :matches()eliminates the need to write outarticle h1,section h1 and many more. We can also use this selector in simple nesting examples but its handy to use it in selecting element that are two or three level deep.


Above are some specifications that come with the release of first official draft of CSS4. Above specifications were absent in CSS3. With release of first draft and having lot many changes we can expect much more changes in future releases of CSS4. The CSS 4 spec is brand new and no web browser will support this spec. whatever may be the next release whether it is styling or coding, it’s always been helpful for CSS users. This is case whether you endorse a new standard or not.


About the author:

Brianne is a blogger by profession. She loves writing on environment and technology. Beside this she is fond of books. She recently did an article on Windows 8 tablet pc. These days she is busy in writing an article on backyard design ideas.