The new CSS pseudo-classes explained :has()

Technology: CSS
Topic: Pseudo-classess explained
Version: 1.1
Author: Cezary Mazur
Author Website: https://cezarymazur.pl

CSS is developing more and more. In addition to various frameworks based on CSS or Sass (BootstrapCSS, TailwindCSS), CSS assembly itself is developing based on the needs and problems reported by developers. With development comes changes, new products, and often new things that are intended to make our programmers' lives easier. This is also the case with the new pseudo-classes in CSS.

In today's article I will briefly focus on the new pseudo-class :has().
This article will explain:

1. What is the :has() pseudo-class and what does it refer to?
2. How to use the :has() pseudo-class in practice?
3. Examples of using the :has() pseudo-class

If you are interested in how to start with TailiwndCSS, check out my latest article about: Tailwind CSS - Beginner's Guide: Where to Start?

1. What is the :has() pseudo-class?

To explain what the :has() pseudo-class is, first we need to explain what pseudo-classes in CSS are.

A pseudo-class is a keyword added to a css selector that specifies a special state of the selector.

The basic pseudo-classes are, for example:

• :hover - state after hovering over the element
• :focus - state when focusing on an element
• :active - element activity status

We already know what a pseudo-class is, so now let's say what a :has() pseudo-class is responsible for

The :has() pseudo-class selects an element containing the specified content. For example, a:has(img) selects all <a> elements containing a child <img> element.

2. How to use the :has() pseudo-class in practice?

:has() in CSS is like a special tool that allows you to change the appearance of a parent element based on whether it contains a specific child or another element. This might seem a bit different from how we usually think about CSS, where styles are applied from parent to child. Until now, there hasn't been a direct way to style the parent based on its content, and there are technical reasons for that.

For example, you might want to style links only if they have images inside them. With :has() you can do this. This opens up new possibilities, like adding styles conditionally depending on the content of an element, which wasn't easily achievable with standard CSS.

The :has() selector is part of the CSS Selectors Level 4 specification, the same set of rules that include the handy :not() pseudo-class.

3. Examples of using a pseudo-class :has()

Let's assume you want to add a bottom margin to the <a> element, but (!) only to the one that contains the <img> element:

.a:has(img) {
  margin: 0 0 2em 0;
}

or depending on whether there is a subheading under the heading, you want to increase or decrease the bottom margin:

.heading h2 {
margin: 0 0 1.5em 0;
}

.heading-group:has(h2):has(.subtitle) h2 {
margin: 0 0 2em 0;
}

You could argue that the CSS :has() selector goes beyond being just a "parent" selector, and that's exactly what it is! In the example with subheadings, it's not necessarily about selecting the ultimate parent; instead, you might choose the parent based on a condition and then proceed to select a child element from there.

For instance:

figure:has(figcaption) { ... }

figure:has(figcaption) img { ... }

Here, the second selector specifically targets a child <img>, not just the parent containing the <figcaption>.

Summary

Time passes quickly and technologies, even as basic as CSS, are developing. In order not to be left behind, it is worth following the news and learning how to make even better use of what we have all known well for years. Thanks to this approach, we will be able to be and become programmers who are desirable in the labor market. And the work itself will bring more joy. Therefore, from now on, you can safely use the :has() pseudo-class, which will make your everyday work easier and faster 😄

Visit cezarymazur.pl

💬 Your Thoughts Matter!

We'd love to hear your thoughts on CSS and the different usage of CSS pseudo-classes. Have you used them in your projects? What has been your experience? Share your insights, suggestions, or any challenges you've faced in the comments below.

❤️ React, Share, Save

If you found this article helpful, consider sharing it with your fellow developers. React to the content and save it for future reference. Your engagement fuels our commitment to bringing you more insightful content.

Cezary MazurFollow

Delivering Web Solutions. → Available for work → Frontend Engineering, Web Support, UI Animations → CEO/Software Delivery at wwwell.pl

Visit cezarymazur.pl for more front-end development tips and tricks. Stay tuned for regular updates and in-depth tutorials to level up your coding game.

🎉 Happy coding!