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

While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain in a element is chosen by the user and how we gain even more conditional styling capabilities when chaining :has() with other pseudo-classes, such as :not() — no JavaScript necessary.

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 element. With it, we can make a choice from a series of s. Combined with :has(), we are capable of manipulating styles based on the selected .

  Option 1
  Option 2
  Option 3
  Option 4
  Option 5

This is your standard 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 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 .

See the Pen [demo 01 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/oNOwded) by Amit Sheen.

But that’s limited to styling the current element, right? If a particular is :checked, then we style its style. We can write a more complex selector and style child elements based on whether an 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 element according to the value of the selected , we select the element if it has a specific [value] that is :checked.

See the Pen [demo 02 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/eYoRopZ) by Amit Sheen.

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

See the Pen [demo 02.1 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/jORLoVM) by Amit Sheen.

But why stop there? If we can use :has() to style the element as the parent of an , then we can also use it to style the parent of the , 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 child of the document :root :has() a particular that is :checked:

:root:has(select [value="foo"]:checked) {
  // Styles applied if  is -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.

See the Pen [demo 03 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/yLrXroO) by Amit Sheen.

Or perhaps a theme picker:

See the Pen [demo 04 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/OJGgjaJ) by Amit Sheen.

How that last example works is that I added a class to each element and referenced that class inside the :has() selector in order to prevent unwanted selections in the event that there are multiple 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.

See the Pen [demo 05 – Using the :has selector on a dropdown menu](https://codepen.io/smashingmag/pen/rNbwvqz) by Amit Sheen.

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 element for something different or interesting, let me know because I’d love to see it!

Further Reading On SmashingMag