CSS4! But, I Just Learned CSS3! A Sneak Peek Into CSS Level 4

CSS4

[dropcap type=”v2″]H[/dropcap]ave you heard? No, bird is not the word, it’s CSS4. It’s starting to become a hot topic around the web development water cooler. Some of you may be thinking, Great, just when I started to get the hang of CSS3! Well, if it helps any, technically there is no such thing as CSS4. It’s little comfort I know, but you really should be excited. As a front-ender, we should all rejoice when progress is made even if it’s smelly IE crawling past simple milestones like rounded corners (thanks IE 9, about time!). When progress is made, it brings us new exciting tools to add to our development kit, making our life easier and bringing the quality of websites to that next level. CSS is going to that next level with 4, shouldn’t your site?

Is CSS3 getting left behind?

No. “Level 4” just stands for the number of the W3C document. Think of it as just adding to and improving the current CSS definitions. Right now the CSS4 spec document is new so there aren’t any browsers that actually support the new rules yet. But, if you’re curious like me about what the future has to hold for CSS… read on. I’m going to give you a sneak peek at what’s to come with the introduction of CSS4.

The Big News About CSS4: Parent Selector!

The biggest news to get excited about in the current draft of CSS4 is support for the highly sought-after parent or “subject” selector. CSS selectors have been around with us since the dawn of CSS, but with the release of CSS4, we’ve got a lot of new cool additions like the parent selector. Rules are typically applied to the innermost selected element in CSS. For example, given the chain body header h1, the CSS rule get’s applied to the h1 element at the end of the chain. CSS3 doesn’t offer a way to style the header tag only if it has a h1 child element. With the introduction of CSS4, we can now do that.

Parent selectors have been the most discussed aspect of the Selectors Level 4 specification. With parent selectors comes a lot more power with CSS. For instance, is can be a life-saver when trying to style generated menus while avoiding having to add classes for styling purposes. I’m more of a hands-on learner and prefer to learn by example. So, let’s take the menu as an example. Say we have a simple list of links. We’re trying to style it, but PHP is the one generating the menu and we don’t have the ability to change it. The problem here is we want to be able to style the li element based on the active class added to the anchor. We have the ability to style a using a.active {}, but we have no way to style the parent li element. Usually what we would do is to add the active class to the list element and not on the link itself (ul li.active a). The problem here is the menu is created by a back-end script which we don’t have access to so we end up with ul li a.active.

Normally in the structure of a CSS document, we refer to the last item in the selectors list. So in our example, ul li a.active, it would be the link with an active class. Now with CSS4, we can change the subject of the used selector. This will give us a ton of power and awesome flexibility when styles. Take the following for example:

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

With that, we can style the li element only when the active class has been added to the child link. Adding the parent selector says that we only want to style the li element, not the a.active element.

Got that? Now, with that in mind, here’s one of those new cool things we can do with it. How about manipulating the background color of a page by just hover over a link…

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

With the markup above, we can apply a red background to the body of the document when a user hovers over a link with the styleSwitcher class. To carry out this without the use of parent selectors, you would have to add custom classes in JS. Now with CSS4, you can use a native one line to make the magic happen.

Keep In Mind

The first draft of the specification document (dated September 29, 2011) targets the parent selector with a dollar sign before the given ($li). The latest draft (dated June 22, 2012) uses new syntax in which the subject of the selector is indicated by an exclamation mark after the given selector (li!). Of course, this could change (it’s just a draft), so don’t forget about it. What matters is that the parent selector will be implemented sooner or later, and the exact syntax is just a matter of preference. It doesn’t matter to me what it looks like, as long as it works properly in the browser.

Looking for a parent selector pollyfill?

Try the cssParentSelector polyfill based on jQuery that allows you to use parent selector in CSS.

Other Notable CSS4 Selectors

The parent selectors aren’t the only nifty thing to come out of CSS4. Check out these others:

Logical Combinators — :matches, :not

Logical CSS pseudo-classes you say? Yup! The first up, :matches. You may already be familiar with this one from Mozilla’s :-moz-any(), which was implemented long ago in Firefox 4. With this selector, we can now group and match items in our CSS document. How can you use that you ask? The simplest example I can come up with is to gather multiple definitions of anchor states into one. See the example below:

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
  color: red;
}

Instead, we can do this:

ul.menu li a:matches(:link, :hover, :visited, :focus) {
   color: red;
}

Pretty simple, huh? It’s not the best example, but it shows the power of :matches pseudo-class.

Second up is the :not pseudo-class. Although technically not new in CSS4 (originally released in the CSS3 specification), the :not pseudo-class became even more powerful in CSS4. See below:

p:not(.active, .visible) {
  color: red;
}

The markup above will make all paragraphs text red except those with the .active and .visible classes.

Location Pseudo-Classes — :any-link, :local-link

Here’s one I think it’s pretty cool just for how simple it is. We already have a lot of control when styling links with pseudo-classes and the :any-link and :local-link gives us even more. First, the :any-link pseudo-class (which by the way is a temporary name that could change) combines definitions for a:link and a:visited into one:

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

And now:

a:any-link {
  color: red;
}

The second pseudo-class, :local-link, is the one that I’m really excited about. With :local-link, you could give a different styles to links on your site that target your home page leaving all others untouched.

nav :local-link {
  text-decoration: none;
}

With that magic line of code, links pointing to the current page will not have the text-decoration style, giving it a different look than the others in perhaps the menu or breadcrumb trail.

Here’s another example:

:not(:local-link(0)) {
  color: red;
}

Confused? Don’t be, simpler than it looks. The markup above will change the text to red on all external links. As you can see, :local-link can be used with a parameter. The number is this parameter that determines the level of the URL path that will be checked and matched against every given link. That may sound a little complicating so here’s a few hands-on examples to help you understand the concept.

nav :local-link(0) {
  color: red;
}
nav :local-link(1) {
  color: green;
}
nav :local-link(2) {
  color: blue;
}
nav :local-link(3) {
  color: yellow;
}
nav :local-link(4) {
  color: gray;
}

With the markup above, let’s say our current address is http://www.benmarshall.me/2012/01/03/ and you have the following links in a menu:

  1. Home
    http://www.benmarshall.me/
  2. 2012
    http://www.benmarshall.me/2012/
  3. January 2013
    http://www.benmarshall.me/2012/01/
  4. 03 January 2013
    http://www.benmarshall.me/2012/01/03/
  5. Article
    http://www.benmarshall.me/2012/01/03/the-article-title/

In this example, the first link will be red, the second green, the third blue, than yellow and then gray.

Time-Dimensional Pseudo-Classes — :past, :current, :future

These pseudo-classes are great for devices with screen readers. With a simple line of CSS markup, we can highlight the word that’s being spoken, kinda link the karaoke machine.

p:current {
   background: yellow;
}

The other use case is styling subtitles for the WebVTT video format. The :past and :future pseudo-classes refer to elements that have been selected and ones that will be selected. Magic!

UI State Pseudo-Class — :indeterminate

This one is new to online form pseudo-classes like :enabled, :disabled, or checked. Most already know that checkboxes and radio buttons have two different states, checked or unchecked. Well how about styling inputs that haven’t been used yet, so they’re not checked or unchecked. That’s where the indeterminate pseudo-class comes in.

input.checkbox:indeterminate {
   background: #ccc;
}

In addition to checkboxes and radio buttons, a progress bar could also be given an indeterminate state when it’s percentage of completion is unknown:

progress:indeterminate {
   background: #ccc;
}

Here we can target the default state and style it to show the user the time left couldn’t be determined.

Tree-Structure Pseudo-Classes — :nth-match, :nth-last-match

Let’s say you have a list of links, some that have the class active, and you want to select only the even-numbered items from the active links. Normally, we would use :nth-child(even) to select all of the even-numbered elements in the list, but in this case, that’s not what we want. Here, we wouldn’t be taking into account the active class. :matches(.active) wouldn’t work either because we’d then be targeting all elements with the class active. Worry no more, :nth-match has come to the rescue.

li a:nth-match(even of .active) {
   color: red;
}

Thanks to this simple CSS markup, we can select only the even-numbered elements from those that have the active class.

Here’s another more advanced example:

p:nth-match(2n+1 of .active, .visible, #important) {
   color: red;
}

Above, the combination of selectors we want to match gets more complicated. The :nth-last-match works exactly the same as :nth-match but starts matching from the end of the DOM structure. We can achieve more using complex syntax An+B shown above.

Grid-Structural Pseudo-Classes — :column, :nth-column, :nth-last-column

Yes, tables are bad for layouts, but good for data that warrants it. HTML tables are row-oriented (

), so columns are missing out. You can create a column-based tables, but then you’d be missing rows since you can’t have both at the same time. Generally, row-based tables are more popular. Styling columns in a table that is row-based, created in the DOM would be useful when you wanted to perhaps alternate background colors. We can of course add additional classes and markup to accomplish this, but with CSS4, we can do it with grid-structural pseudo-classes.

:column(.total) {
   background: red;
}

:nth-column(even) {
   background: blue;
}

The above CSS markup will set the background color to red for every cell in the .total column and blue for every even-numbered column in the tables.

We can now simply select columns just as we would rows and even get a little crazy with something like: :nth-column3n+2. Kind in mind columns are styled based on their order in the DOM structure, not how they’re displayed on the page. A table isn’t the only thing that benefits from grid-structural pseudo-classes, column-based layouts are on the way.

In Conslusion

The new additions to the Selectors specification look pretty cool and definitely making progress on less code. I’m looking forward to using them in my future projects, but the only problem is… they need to be implemented by browsers first (they seem to always be behind the times).

Where are we at now with the Level 4 of Selectors specification?

Currently, the Level 4 of Selectors document isn’t a official recommendation yet — still evolving (demonstrated by the parent selector switching from $ to !). Don’t rely on the document just yet. It’s almost certain to get changed in the future. This can be considered good news for those of you that wish to contribute to the discussion and suggest ideas.

What about implementation, can I do it?

Many many thinking it’s hard to implement something that’s still a work in progress. That’s partially true. Browser vendors only start to think about implementation once the documentation has gone from a messy to solid. Even though we’re not able to use these features natively right now, there are some libraries out that will allow you to use some of the goodness of Selectors Level 4. Projects like Sel are already on the forefront implementing some of these new features. Other shims and polyfills can also be used to start experimenting with features that will be available in our browsers in the coming months and years.

Other CSS4 Specifications

There’s already other Level 4 documents you can review:

They’re all still in development so we’ll have to wait a little longer for the next official W3C Working Draft. You should also check out this interesting article by David Storey (a W3C Working Group member) wrote on Level 4 Selectors.

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

Your email address will not be published. Required fields are marked *