:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

A pseudo-classe CSS :focus-within representa um elemento que recebeu o foco ou contém um elemento que recebeu o foco. Em outras palavras, isto representa um elemento que é correspondido por si só pela pseudo-classe :focus ou tem um descendente que é correspondido por :focus. (Isto inclui descendentes em shadow trees.)

css
/* Seleciona uma <div> quando um de seus descendentes é focado */
div:focus-within {
  background: cyan;
}

Este seletor é útil, pegando um exemplo comum, para destacar um todo <form> container quando o usuário focar em um de seus campos <input>.

Sintaxe

Error: could not find syntax for this item

Exemplo

Neste exemplo, o formulário receberá estilos de coloração especiais quando o input de texto recebe o foco

HTML

html
<p>Tente digitar neste formulário.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text" />
  <br />
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text" />
</form>

CSS

css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Resultado

Especificações

Specification
Selectors Level 4
# the-focus-within-pseudo

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também