Combining CSS :has() And HTML  For Greater Conditional Styling — Smashing Magazine

Even though the CSS :has() pseudo-class is relatively new, we already know a lot about it, thanks to many, many articles and tutorials demonstrating its powerful ability to conditionally select elements based on their contents. We’ve all seen the card component and header examples, but the conditional nature of :has() actually makes it adept at working with form controls, which are pretty conditional in nature as well.

Let’s look specifically at the <select> element. With it, we can make a choice from a series of <option>s. Combined with :has(), we are capable of manipulating styles based on the selected <option>.

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

This is your standard <select> usage, producing a dropdown menu that contains options for user selection. And while it’s not mandatory, I’ve added the selected attribute to the first <option> to set it as the initial selected option.

Applying styles based on a user’s selection is not a new thing. We’ve had the Checkbox Hack in our pockets for years, using the :checked CSS pseudo-class to style the element based on the selected option. In this next example, I’m changing the element’s color and the background-color properties based on the selected <option>.

But that’s limited to styling the current element, right? If a particular <option> is :checked, then we style its style. We can write a more complex selector and style child elements based on whether an <option> is selected up the chain, but that’s a one-way road in that we are unable to style up parent elements even further up the chain.

That’s where :has() comes in because styling up the chain is exactly what it is designed to do; in fact, it’s often called the “parent selector” for this reason (although “family selector” may be a better descriptor).

For example, if we want to change the background-color of the <select> element according to the value of the selected <option>, we select the element if it has a specific [value] that is :checked.

Just how practical is this? One way I’m using it is to style mandatory <select> elements without a valid selected <option>. So, instead of applying styles if the element :has() a :checked state, I am applying styles if the required element does :not(:has(:checked)).

But why stop there? If we can use :has() to style the <select> element as the parent of an <option>, then we can also use it to style the parent of the <select>, as well as its parent, in addition to its parent, and even its parent… all the way up the chain to the :root element. We could even bring :has() all the way up the chain and sniff out whether any <select> child of the document :root :has() a particular <option> that is :checked:

:root:has(select [value="foo"]:checked) {
  // Styles applied if <option value="foo"> is <select>-ed
}

This is useful for setting a custom property value dynamically or applying a set of styles for the whole page. Let’s make a little style picker that illustrates the idea of setting styles on an entire page.

Or perhaps a theme picker:

How that last example works is that I added a class to each <select> element and referenced that class inside the :has() selector in order to prevent unwanted selections in the event that there are multiple <select> elements on the page.

And, of course, we don’t have to go all the way up to the :root element. If we’re working with a specific component, we can scope :has() to that component like in the following demo of a star rating component.

Watch a short video tutorial I made on using CSS to create 3D animated stars.

Conclusion

We’d be doing :has() a great disservice if we only saw it as a “parent selector” rather than the great conditional operator it is for applying styles all the way up the chain. Seen this way, it’s more of a modern upgrade to the Checkbox Hack in that it sends styles up like we were never able to do before.

There are endless examples of using :has() to create style variations of a component according to its contents. We’ve even seen it used to accomplish the once-complicated linked card pattern. But now you have an example for using it to create dropdown menus that conditionally apply styles (or don’t) to a page or component based the currently selected option — depending on how far up the chain we scope it.

I’ve used this technique a few different ways — e.g., as form validation, a style picker, and star ratings — but I’m sure there are plenty of other ways you can imagine how to use it in your own work. And if you are using :has() on a <select> element for something different or interesting, let me know because I’d love to see it!

Further Reading On SmashingMag

(gg, yk)