:focus-within é uma pseudo-classe do CSS que representa um elemento em que um dos seus elementos filho recebe uma correspondência da pseudo-classe :focus. Caso isso tenha soado estranho, não se preocupe que vendo o funcionamento do exemplo, tudo vai ficar mais claro.
Exemplo:
Depois que eu descobri esse seletor, eu acabei deixando de usar algumas soluções bem desnecessárias com Javascript. Como visto no exemplo, com ele, podemos alterar o estilo do elemento pai, quando um elemento filho está sob foco.
É importante entender que esse seletor funciona principalmente nos browsers modernos. Browsers como IE ou estão fora do suporte. Veja mais detalhes no Can I use.
Compartilhe:
