:has() relational selector

Baseline 2023 (Chrome 105, Safari 15.4, Firefox 121); amplamente disponível.

Chrome 105Edge 105Safari 15.4Firefox 121

Seleciona um elemento com base no que ele contém ou no que vem depois dele, algo que o CSS nunca conseguiu antes ("um card que tem imagem", "um campo de formulário cujo input é inválido", "o label antes de um checkbox marcado"). Substitui uma grande classe de classes de estado em JS.

CSS

.fx-002 {
  font-family: system-ui;
  display: grid;
  gap: 12px;
  max-width: 360px
}
.fx-002 fieldset {
  opacity: .4;
  pointer-events: none;
  transition: opacity .2s
}
.fx-002:has(input[type=checkbox]:checked) fieldset {
  opacity: 1;
  pointer-events: auto
}
.fx-002 fieldset:has(input:user-invalid) {
  border-color: #c0392b
}
.fx-002 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<form class="fx-002">
  <label><input type="checkbox"> Enable shipping address</label>
  <fieldset><legend>Shipping</legend><input placeholder="Street" required></fieldset>
</form>

Fallback: Envolva em `@supports selector(:has(a))` se o estado sem :has precisar ser diferente; caso contrário o fieldset simplesmente continua habilitado.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/:has

Prompt

Use `:has()` para estilização que depende do pai e dos irmãos em vez de alternar classes com JavaScript: por exemplo `form:has(input[type=checkbox]:checked) fieldset` para revelar uma seção, `.card:has(img)` para variantes com mídia, `label:has(+ input:focus-visible)` para labels em foco. Mantenha o argumento de `:has()` raso (um ou dois seletores compostos) por performance e proteja layouts não triviais com `@supports selector(:has(a))`.