CSS State Machine

For years, managing UI state on the web usually meant reaching for JavaScript. But CSS has quietly become a state machine of its own. Pseudo-classes track interaction. Media queries read the environment and user preferences. :has() observes the DOM tree. Container queries respond to size, style, scroll position, and even anchor placement. Scroll-driven and scroll-triggered animations react to where the user is on the page. And with sibling state, CSS can now respond to what's happening next door. A practical tour of the CSS features that let you keep and respond to state — from things you can ship today to the cutting-edge stuff landing in browsers right now.