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.)

/* 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

:focus-within

Exemplo

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

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

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

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

input {
  margin: 4px;
}

Resultado

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':focus-within' in that specification.
Rascunho atual Initial definition.

Compatibilidade entre navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 60Edge No support No
Notes
No support No
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Full support 52IE No support NoOpera Full support 47Safari Full support 10.1WebView Android Full support 60Chrome Android Full support 60Edge Mobile No support No
Notes
No support No
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 10.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, leandroruel
Última atualização por: mdnwebdocs-bot,