Combining CSS :has() And HTML  For Larger Conditional Styling — Smashing Journal

Regardless that the CSS :has() pseudo-class is comparatively new, we already know lots about it, due to many, many articles and tutorials demonstrating its highly effective capacity to conditionally choose components based mostly on their contents. We’ve all seen the cardboard element and header examples, however the conditional nature of :has() really makes it adept at working with type controls, that are fairly conditional in nature as effectively.

Let’s look particularly on the <choose> factor. With it, we will choose between a collection of <choice>s. Mixed with :has(), we’re able to manipulating kinds based mostly on the chosen <choice>.

<choose>
  <choice worth="1" chosen>Choice 1</choice>
  <choice worth="2">Choice 2</choice>
  <choice worth="3">Choice 3</choice>
  <choice worth="4">Choice 4</choice>
  <choice worth="5">Choice 5</choice>
</choose>

That is your commonplace <choose> utilization, producing a dropdown menu that comprises choices for consumer choice. And whereas it’s not obligatory, I’ve added the chosen attribute to the primary <choice> to set it because the preliminary chosen choice.

Making use of kinds based mostly on a consumer’s choice isn’t a brand new factor. We’ve had the Checkbox Hack in our pockets for years, utilizing the :checked CSS pseudo-class to fashion the factor based mostly on the chosen choice. On this subsequent instance, I’m altering the factor’s coloration and the background-color properties based mostly on the chosen <choice>.

However that’s restricted to styling the present factor, proper? If a selected <choice> is :checked, then we fashion its fashion. We are able to write a extra advanced selector and magnificence little one components based mostly on whether or not an <choice> is chosen up the chain, however that’s a one-way highway in that we’re unable to fashion up dad or mum components even additional up the chain.

That’s the place :has() is available in as a result of styling up the chain is precisely what it’s designed to do; in reality, it’s typically known as the “parent selector” because of this (though “family selector” could also be a greater descriptor).

For instance, if we wish to change the background-color of the <choose> factor in response to the worth of the chosen <choice>, we choose the factor if it has a selected [value] that’s :checked.

Simply how sensible is that this? A technique I’m utilizing it’s to fashion obligatory <choose> components with out a legitimate chosen <choice>. So, as an alternative of making use of kinds if the factor :has() a :checked state, I’m making use of kinds if the required factor does :not(:has(:checked)).

However why cease there? If we will use :has() to fashion the <choose> factor because the dad or mum of an <choice>, then we will additionally use it to fashion the dad or mum of the <choose>, in addition to its dad or mum, along with its dad or mum, and even its dad or mum… all the best way up the chain to the :root factor. We might even carry :has() all the best way up the chain and sniff out whether or not any <choose> little one of the doc :root :has() a selected <choice> that’s :checked:

:root:has(choose [value="foo"]:checked) {
  // Kinds utilized if <choice worth="foo"> is <choose>-ed
}

That is helpful for setting a customized property worth dynamically or making use of a set of kinds for the entire web page. Let’s make a bit of fashion picker that illustrates the concept of setting kinds on a whole web page.

Or maybe a theme picker:

How that final instance works is that I added a category to every <choose> factor and referenced that class contained in the :has() selector with a purpose to forestall undesirable picks within the occasion that there are a number of <choose> components on the web page.

And, in fact, we don’t must go all the best way as much as the :root factor. If we’re working with a selected element, we will scope :has() to that element like within the following demo of a star score element.

Watch a brief video tutorial I made on utilizing CSS to create 3D animated stars.

Conclusion

We’d be doing :has() an awesome disservice if we solely noticed it as a “dad or mum selector” quite than the nice conditional operator it’s for making use of kinds all the best way up the chain. Seen this manner, it’s extra of a contemporary improve to the Checkbox Hack in that it sends kinds up like we have been by no means in a position to do earlier than.

There are countless examples of utilizing :has() to create fashion variations of a element in response to its contents. We’ve even seen it used to perform the once-complicated linked card pattern. However now you’ve an instance for utilizing it to create dropdown menus that conditionally apply kinds (or don’t) to a web page or element based mostly the presently chosen choice — relying on how far up the chain we scope it.

I’ve used this system a couple of other ways — e.g., as type validation, a mode picker, and star scores — however I’m certain there are many different methods you’ll be able to think about how you can use it in your personal work. And in case you are utilizing :has() on a <choose> factor for one thing completely different or fascinating, let me know as a result of I’d like to see it!

Additional Studying On SmashingMag

(gg, yk)