CSS does a lot with its selectors, but there’s still a lot more it could do to make things easier for developers. In this guide we’ll be looking at some of the main developments coming from the CSS Selectors Specification 4, and how it might make your development life easier.

These are, for the most part, not currently supported by browsers!

:has

Parent Selection. We all want it, and :has tries to solve it. Though it’s not currently supported by any browsers due mostly to frequent syntax changes, :has allows for both parent and previous sibling selection. Have you ever wanted to select an element, and then navigate back up the DOM to its parent? That’s exactly what this element does.

Here is an example. The below CSS will target a p paragraph which has a child span: 

HTML Copy:

CSS Copy:

Similarly, :has() solves the problem of previous sibling selectors. The below will target a p paragraph who’s next sibling is a p.

HTML Copy:

CSS Copy:

:is()

It’s common to write out lots of lines to select certain elements in CSS. Something like this isn’t uncommon:

Surely there is an easier way? Well, :is() IS that easier way. The above can be boiled down to just this:

What About :where?

:where() is another level 4 selector, the only difference is its specificity is always 0. Specificity in CSS is what determines which styles override which. Having a specificity of zero means :where will never make a style more specific, which can be useful in some cases, i.e. for ensuring certain styles don’t overwrite other ones.

In the future, this clause may include a number which may let us set the specificity, something for which people have been using !important.

More Complex :not 

:not() is supported by most browsers, but only for simple selectors. What is a simple selector? It is just a single element. With this update, we will be able to select an element which is not contained within an element. For example, the below will target only divs not contained within a section:

Grid Column Selection

A number of column selectors are being planned for the next level of CSS selectors. Importantly, these don’t just apply to tables, but grids as well. That means we’ll finally be able to style specific grid columns or items, which we couldn’t do previously.

There are three selectors for columns in the new specification:

As you might expect, we can then combine these to style cells within that column:

For more content like this, check out our archives or follow us on Twitter.