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.

Smashing Magazine is a reputable publication that caters to web designers and developers, offering a  articles, tutorials, and resources to help them stay at the forefront of their craft. With a focus on practical, actionable insights, Smashing Magazine covers a wide range of topics, including frontend development, UX/UI design, performance optimization, and responsive web design. The platform also hosts conferences, workshops, and webinars, providing opportunities for professionals to network and further their skills. By following Smashing Magazine, developers can access resources to enhance their knowledge, skills, and career prospects in the rapidly evolving field of web development.

Smashing Magazine

Learn how to use the :has() pseudo-class in CSS to apply conditional styling based on a selected option in a <select> element. This technique allows for styling not only the selected element, but also its parent and even further up the chain. Practical use cases include styling mandatory <select> elements and creating style variations of components.

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