CSS :has() selector eliminates JavaScript for common form interactions

The CSS :has() pseudo-class, now supported across Chrome, Edge, Firefox, Safari, and Opera without polyfills, allows developers to style a parent element based on conditions inside its child elements. Previously, tasks like highlighting a focused field, showing validation errors, or marking required inputs demanded JavaScript event listeners and class toggling. With :has(), a single CSS selector can replace multiple lines of JS — for example, styling a wrapper when its input receives focus or when it contains an invalid value. Pairing :has() with states like :invalid and :not(:placeholder-shown) enables real-time inline validation that only triggers after user interaction, avoiding premature error messages on page load. While :has() handles most visual state changes natively, developers are advised to remain cautious around accessibility concerns, such as using pointer-events: none alone to disable form submission buttons.