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

seletor:focus-within {

}

Exemplo

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

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

div {
	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