An Introduction to CSS4 Selectors

So, CSS4 is here. Already? Has CSS3 ended? WHAT??

Nothing is over, don’t worry. Whatever you have learned of CSS3 will stay valid for at least few years. But as always, the web development landscape is changing and we have to adapt to the new changes.

The buzzword CSS4 came in the beginning of this year… but at that time it wasn’t anything more than just a buzzword. No particular selectors or code sets had come out yet. They have come out now, so let’s take a tour down the style-sheet avenue.

Why doesn’t W3C let me catch a breath?

One thing you should realize is that 3 and 4 are just numbers. Unimportant. CSS is just CSS. The evolution process will keep changing the numbers and these numbers are likely to increase in a much more rapid pace now, so don’t focus on them. All you need to know is that CSS is evolving and you have to keep up with the updates. That being said, let’s move forward.

Selectors are the first document to make it to CSS4. Selectors are the patterns match against elements in a tree.

Here’s a new selector added in CSS3. :matches;

ul.navigation li a:link,
ul.navigation li a:hover,
ul.navigation li a:visited,
ul.navigation li a:focus
    color: #FF0000;

Now this whole code can be:

ul.navigation li a:matches(:link, :hover, :visited, :focus)
   color: #FF0000;


Image courtesy: loopinfinito

This was just an example. There are many pseudo-classes that have come with CSS4 and there are more CSS4 classes being added all the time. Classes like :not, :active/:visible, :any-link, :local-link, :past, :future, :enabled, :disabled, :checked, :indeterminate

Of course, I’m not going to describe each of these classes here; that would just take too much time. You can visit W3C’s official page for CSS4 for learning all these new pseudo-classes.

Do browsers support CSS4?

Good question. Most of the Desktop browsers (excluding IE, obviously) support CSS4. But today when we make websites, we want to make them ready to be opened on mobile devices. Not many mobile browsers and operating systems support CSS4 yet.

So using CSS4 in commercial projects is not a very good idea at the moment, but this is the time to get your hands working fluently because, after all, CSS4 is the future.

To kicking off with CSS4, here’s a nifty little tool:

CSS Comb

The tool claims to be the greatest tool for sorting out your CSS codes. And you know what… it’s hard to argue with that. This tool really does the job better than anyone else. It can parse your code, sort your code alphabetically and through other standards, checks, formats and optimizes your CSS code.

CSS Comb is a tool for ordering css code

And while you’re on it. You should also check out:


CSS4 is changing the way you stylesheet. You will have to learn new classes and adapt to new techniques, but that’s what it is. That’s what makes web so dynamic, evolving, and ready to meet challenges.
The good news here is that you have ample amount of time to learn the new things.

You should start learning CSS4 today so that when most the browsers support it, you should be all geared up.

Oh, by the way, if you google “CSS4”, the page that comes on top is an April fool’s joke. Don’t take that seriously.

All the best you all.

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved