Three cool ‘Coming Soon’ CSS features.

Three cool ‘Coming Soon’ CSS features.

As of CSS3, future iterations come as modules. That is to say, there is no ‘CSS4′ but if that’s what you’re looking for, you won’t be disappointed by this post. We’re going to take a look at some of the ‘Level Four Selectors’, currently in editors draft. These new features are exciting news for CSS enthusiasts and add some much needed and very welcome functionality.

1. Location Pseudo Classes

Location Pseudo Classes have the potential to change the way we signpost navigational links on our sites.

a:link and a:visited can be used separately to set different colours or styles to links on a page based on whether or not you’ve viewed the linked page. If you wanted to set different styles based on whether or not the link is internal or external, you could do that too.

The a:any-link pseudo class would set a style for all links and a:local-link would override that style specifically for links to internal pages.

You could go further and use ‘levels’ to assign styles based on your current page location in relation to other pages. Harder to explain than to demonstrate, here’s an example:

If your current location was http://website.com/courses/css/intro-to-css-4 then you could use the :local-link pseudo class to set a different colour for links that are on the site, or in the courses section, or specifically in the CSS course like so:

/**effects all local links**/

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

/** effects only links in the courses section **/

selector:local-link(1) { color: yellow; }

/** effects only links in the CSS course **/

selector:local-link(2) { color: green; }

In this example I would have created a traffic light system for how far out of the current content the links are taking you, green being most relevant and red being most broad, but still on site.

2. Matches

This new pseudo class offers a cleaner way of grouping selectors together for specific purposes. For example if I wanted to style the h1 text of three different sections with current CSS I would use something like:

.section-1 h1, .section-2 h1, .section-3 h1 {/**styling goes here**/}

With the :matches pseudo class I could instead use:

:matches(.section-1, .section-2, .section-3) h1 {/**styling goes here**/}

This is a perfect example of how CSS is evolving to become more efficient and small changes like this will lead to a significant difference in style sheet loading times.

3. :has – The Mythical Parent Selector (my favourite)

Right now, there is no way to target the parent of an element using CSS, so this is a biggy. According to CSS tricks the syntax was suggested as far back as 2008 and it looks like it may soon see the light of day. To use their example (because it’s a good one) but including the syntax suggested in CSS Selectors 4, it would look something like this…

a:has (img) { border: none; }

Here’s why it’s weird: in normal CSS, the target would be on the right. In this case the target is the ‘a’ tag (on the left) but only if it includes an image (information that comes after, not before). That’s going to take some getting used to…

There are some concerns over performance: If I wish to tell the browser to locate all the links that have an image, won’t it have to re-render everything to do that?

 

In this mind melting piece by Jonathan Snook, he explains that a parent selector would replace the universal selector as the most inefficient selector because browsers evaluate from right to left, not left to right. So in the example we gave (  a:has (img) { border: none; }  ) it would have to search every element to assess whether it has an image before it got to the ‘a’ tag to understand you only wanted to check links with with images. This is why in normal CSS specifity goes from left to right and why the parent selector is such a conundrum to get right.

That being said, there’s huge potential here and it will be interesting to see what the final implementation looks like.

Are you excited about the new selectors? Did I get anything wrong? Let me know in the comments.

 

Get our best blogs & free stuff straight to your inbox. Join our mailing list now.

Get in! You're all signed up for our next newsletter.

Submit a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>