O :focus-withinpseudo seletor em CSS é um pouco incomum, embora bem nomeado e bastante intuitivo. Ele seleciona um elemento se esse elemento contiver algum filho que o tenha :focus.
form:focus-within ( background: lightyellow; )Que funciona assim ...
Eu disse “incomum” porque não é comum em CSS poder selecionar um elemento pai com base na existência ou estado dos elementos filhos. Claro que é útil!
Aqui está um exemplo de formulário para experimentar:
Veja o Pen Simple Responsive Form com: focus-within de Chris Coyier (@chriscoyier) no CodePen.
Observe que o exemplo usa :focus-withinem todo o formulário e na quebra de entrada interna
Qualquer maneira que um elemento filho possa se tornar focado irá disparar: focus-within. Por exemplo, se um elemento tem um atributo tab-indexou contenteditable, então é um elemento focalizável e funcionará. Também não importa como o elemento se tornou focado. Ele poderia ser clicado ou tocado, poderia ter sido tabulado ou navegado por algum outro meio, ou mesmo focado em JavaScript, como ...
document.querySelector("input").focus();Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 60 | 52 | Não | 79 | 10,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |