Although the hype with CSS3 is still buzzing and making its rounds with many developers and browsers slowly implementing more features and updates to make working with stylesheets more effective, CSS4 is definitely in the pipeline.

CSS4 Level 4 Selectors

Just as any new version of HTML, CSS or PHP - they're years in development and as soon as they're released, they're almost instantly outdated. CSS3 provided web developers with an onslaught of new features, selectors and power to add animations, transitions and effects to their websites. But, as with any evolutionary process - the cycle constantly continues, giving birth to CSS Level 4.

Level 4 is just the number of the W3C document that represents the version of the specification. With every new draft specification, selectors are the first to be developed and drafted about with documents being developed independently of each other. This has always been advantageous to the life cycle of the HTML and CSS specifications because finished parts of the document can be closed and set as recommendations - like Selectors Level 3, currently in the CSS3 specification. Finishing a document quickly and moving problematic parts to the next level helps to push the Web forward because it implements the specification one chunk at a time.

What Are Selectors?

So far, the Level 4 specification explains selectors as 'patterns' that match against elements in a DOM tree with most of the selectors in the Level 4 specification acting as psuedo-classes.

Logical Psuedo-Classes

The first addition to the Level 4 specification is that of logical psuedo-classes by using :matches - which, some of you may already be used to with Mozilla's :-moz-any() selector. The principle of this selector is to allow us to group and match multiple items in a CSS document. Lets say we want to take a simple example:

header nav li a:link,
header nav li a:hover,
header nav li a:visited,
header nav li a:focus {
   color: #333;

The :matches selector allows us to:

header nav li a:matches(:link, :hover, :visited, :focus) {
   color: #333;

We can even extend on this to much more complex and robust situations:

.posts article:matches(.sticky, .pinned, #important) {
   background: #cecece;
   font-weight: bold;

Building on top of this, we've got the :not selector which is our negation pseudo-class allowing us to find complements of sets against our matched expression:

.posts article:not(.sticky, .pinned) p {
   color: #F00;

This allows us to set the paragraph text red of those article elements that don't have the class 'sticky' or 'pinned' - great! We can expand on this, matching classes, psuedo-classes or IDs.

Location Pseudo-Classes

The new location psuedo-classes will give any developer much more control of the links on any page. The definition of the :any-link selector defines a:link and a:visited into one, cutting back on what you have to type (though, Sass or LESS could do this for you).

a:visited {
   color: blue;

Can be transformed into:

a:any-link {
   color: blue;

We can build on this with a new helpful selector :local-link - simply put, allows us to style any links that are pointing to the current page. In this example, the navigation link to the current page i.e. the active page, will be bold:

header nav li :local-link {
   font-weight: bold;

The :local-link selector (though unconfirmed) takes one parentheses that allows you to specify the depth of the link. Passing :local-link(1) will apply to all links to the current page under the first directory, :local-link(2) matches the second path directory, etc.

We can combine this with some previous logic to target all external pages, or, target all external pages that take you to a directory path:

:not(:local-link(0)) {
   background: url(external.gif) 0 0 no-repeat;
:not(:local-link(1)) {
   background: url(external-tree.gif) 0 0 no-repeat;

You can combine all the Level 4 selectors into more complex logical expressions, giving you much more power in the CSS document.

We'll be writing a second part to this article during the coming week discussing the new :nth-match, :nth-last-match, :column, :nth-last-column, parent, drop and drag, :placeholder-shown and :indeterminate selectors. Then we'll be gritting our teeth into the descendant, child, following-sibling and next-sibling combinators that finally let you take advantage of the parent element selectors.

We found all of this from the 'Selectors Level 4' specifcation - check it out.

Make your Instagram beautiful. Preview your images before you post them ›