: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 janeiro de 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 itemExemplo
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 |