Pseudoclasse focus-within

A pseudoclasse focus-within define o estilo para elementos que estão em foco. Diferente da pseudoclasse focus, que define o estilo diretamente no próprio elemento, focus-within define o estilo para o elemento pai.

Sintaxe

cssseletor:focus-within {

}

Exemplo

Vamos definir uma cor de fundo azul para o elemento pai, quando seu elemento filho input estiver em foco:

html<div>
  Digite seu nome: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

Veja também

pseudoclasse :indeterminate,
que define o estilo para interruptores que estão em estado indeterminado
pseudoclasse :default,
que define o estilo para elementos padrão
pseudoclasse :fullscreen,
que define o estilo para elementos em modo de tela cheia
pseudoclasse :placeholder-shown,
que define o estilo para elementos quando o texto de dica é exibido
propriedade caret-color,
que define a cor do cursor de texto no input