CSS state and relational selectors
type: TechArticle
description: Use `:has()` together with `:user-invalid`, `:user-valid`, `:placeholder-shown` and `:focus-within` to express form and component state in CSS, removing the JavaScript class-toggling pattern and the race conditions it brings.
language: en
is part of: Web Specification Studio
author: Web Specification Studio
publisher: Web Specification Studio
license: https://creativecommons.org/licenses/by/4.0/
date modified: 2026-05-29T16:40:22.000Z
citation: W3C Selectors Level 4 — Relational selector `:has()`
  type: CreativeWork
  publisher: W3C
citation: MDN — `:has()`
  type: CreativeWork
  publisher: MDN
citation: MDN — `:user-invalid`
  type: CreativeWork
  publisher: MDN
citation: HTML Living Standard — Constraint validation
  type: CreativeWork
  publisher: WHATWG

Web Specification Studio
type: WebSite

Web Specification Studio
type: Organization

breadcrumb
type: BreadcrumbList
item list element: Home
  type: ListItem
  position: 1
  item: https://webspecification.com/
item list element: Spec
  type: ListItem
  position: 2
  item: https://webspecification.com/spec/
item list element: Accessibility
  type: ListItem
  position: 3
  item: https://webspecification.com/spec/accessibility/
item list element: CSS state and relational selectors
  type: ListItem
  position: 4
  item: https://webspecification.com/spec/accessibility/css-state-selectors/