Unlocking the Power of the CSS :has Selector (Plus 4 Examples)

Understanding the CSS :has Selector (And Example Uses)

The :has() selector in CSS offers developers a powerful tool for more targeting HTML elements on their webpages. In some cases, it can be used to replace more complex and time-consuming JavaScript code.

What is the CSS :has Selector?

The :has() selector is a powerful way to target elements based on a relationship with other elements. The selector allows you to identify an element based on the presence or absence of a child or sibling element. This can be useful in situations where you want to apply styling to an element based on another element’s characteristics. For example, you could use the selector to change the color of text based on the presence or absence of a particular element.

How to Use the :has Selector

Using the :has() selector is straightforward. You start by selecting the element of interest, then add the :has() expression with the desired condition. Here is the syntax:

element:has(condition) {
  /* Styles go here */
}

For example, if you wanted to select all div elements that contain an h1 heading, you would use this expression:

div:has(h1) {
  /* Styles go here */
}

You can also combine conditions to target specific elements. For example, you could target all div elements that contain both an h1 and h2 heading like this:

div:has(h1, h2) {
  /* Styles go here */
}

The :has() selector is supported in all modern browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Examples of the :has Selector

Let’s explore some examples of the :has() selector in action.

Example 1: Increase Font Size

Say you have a list of articles on a webpage and you want to increase the font size of the titles of articles that have comments. This can easily be done using the :has() selector:

article:has(.comment) h2 {
  font-size: 1.2rem;
}

Example 2: Change Color

You could also use the :has() selector to change the color of an element based on the presence of another element. For instance, if you had a list with links and you wanted to change the color of the link if there was a comment, you could do this:

li:has(.comment) a {
  color: blue;
}

Example 3: Show/Hide Elements

In some cases, you may want to display or hide content based on the presence or absence of elements. For example, say you wanted to show a “No Comments” message if an article didn’t have any comments. This can be done with the :has() selector:

article:not(:has(.comment)) .no-comments {
  display: block;
}

Example 4: Change Margins

Finally, you could also use the :has() selector to adjust margins based on the presence of elements. For instance, if you wanted to add extra space below articles with comments, you could do this:

article:has(.comment) {
  margin-bottom: 10px;
}

As you can see, the :has() selector can be a powerful tool for targeting elements in CSS. It can be used to make changes to elements based on the presence or absence of other elements, which can be a great way to simplify complex styling tasks.