Exciting CSS4 Selectors Coming Soon: What to Expect

The current status of CSS Selectors Level 4 is a kind of draft; however, modern browsers have already started implementing certain parts of the new specifications.

In essence, there will never be CSS4 just as there will never be HTML6, but what will exist are selectors and pseudo-classes at a higher level (Level 4). Without going into details, what’s important is that these will be refreshed and improved to slightly enhance our CSS writing experience and even streamline processes.

So, straight to the point, I’ll show you a few selectors, or actually, a few new pseudo-classes, that I personally like and I’m sure you’ll find them very useful in the future.

I’ve added the browser support next to each pseudo-class, which is updated from the caniuse.com website that I assume you’re all familiar with.

1. The :is Selector

A new pseudo-class in CSS Level 4 that will save you time and code and allow you to group selectors together:

:is(article, div.section, section) h2 {
  font-size: 3em;
}

/* Is equivalent to that: */
article h2, div.section h2, section h2 {
  font-size: 3em;
}

Here’s another example that clarifies the point and illustrates the code savings even better:

:is(.main, p, div.my-stuff) :is(h1, h2, h3, h4) {
  border: 2px dotted #363b3e;
}

/* Is equivalent to that: */
.main h1,
.main h2,
.main h3,
.main h4,
p h1,
p h2,
p h3,
p h4,
div.my-stuff h1,
div.my-stuff h2,
div.my-stuff h3,
div.my-stuff h4 {
  border: 2px dotted #363b3e;
}

This selector used to be called “matches” and “any” for a while, but it’s intended to be replaced by “is” for backward compatibility.

2. The :placeholder-shown Selector

The pseudo-class named :placeholder-shown targets all input elements displaying placeholder text. Think of it as a nice way to distinguish between input elements currently showing placeholder text and those that are not.

:placeholder-shown {
    border: 2px solid #39b54a;
}

In the following example, the border color will turn green only if the placeholder is visible, and the border will disappear as soon as the user starts typing:

3. The :dir Selector

This pseudo-class targets every element according to the document’s established direction. For example:

:dir(ltr) {
    color: red;
}

:dir(rtl) {
    color: blue;
}

Such an option can be very useful when used with CSS Variables on multilingual sites.

4. The :local-link Selector

The following pseudo-class targets links pointing to the same domain as the current page, but with a cool twist. Take a look at the example below:

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

a:local-link(1){
    color: green;
}

a:local-link(2){
    color: blue;
}

Assuming we are on the URL https://example.com/tag/css, with the above CSS:

The link https://example.com/ - will be colored red

The link https://example.com/tag - will be colored green

The link https://example.com/tag/css - will be colored blue

5. The :has Selector

Consider the following example. The following selector matches any <a> element containing a child of type <img>:

a:has(> img)

Perhaps it doesn’t seem very interesting, so take a look at the next selector, which matches any <section> element that does not contain any Heading Tags:

section:not(:has(h1, h2, h3, h4, h5, h6))

Note that the order of these pseudo-classes matters. Changing the order like this:

section:has(:not(h1, h2, h3, h4, h5, h6))

…will cause the selector to match any <section> element that contains any elements that are not heading tags.

I’ve written a more comprehensive post about the CSS :has property. Take a look!

6. The :focus-within Selector

This pseudo-class targets any element in focus and any element that is a descendant (in the flat tree) of it that is also in focus. In other words, looking at the following HTML:

<form>
  <label for="given_name">Your Name:</label>
  <input id="given_name" type="text">
</form>

And the following CSS:

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

We get a situation where the form will receive a different background color when the input is focused. If your browser supports it, here’s a live example:

7. The :not Selector

In CSS3, we could use :not for a simple, single selector. In contrast, soon you’ll be able to add multiple selectors simultaneously:

a:not([rel="external"], [rel="nofollow"]) {
    color: red;
}

That’s it. Know of any other interesting pseudo-classes? Share with us in the comments… we’d love to see 🙂