:focus-within
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