The different ways to use CSS :has() , with examples

The :has() pseudo-class has emerged as a popular and versatile CSS feature, enabling developers to style elements based on their relationship with other elements without relying on JavaScript. Introduced with full browser support since 2023, :has() allows for more declarative and context-aware styling. It can be used to select parent elements under certain conditions, control CSS Grid layouts dynamically, style form parent elements based on the state of child inputs, and create effects like blurring non-hovered elements or simulating previous sibling selectors. This capability reduces the need for JavaScript in state-driven styling, fostering cleaner and more efficient CSS solutions. Additionally, the article explores how :has() can be used for complex tasks like implementing light-dark mode toggles purely with CSS, highlighting its potential to simplify many common web design challenges.