Pseudo-classe focus-within

La pseudo-classe focus-within définit le style des éléments qui sont en focus. Contrairement à la pseudo-classe focus qui définit le style directement à l'élément lui-même, focus-within définit le style pour l'élément parent.

Syntaxe

csssélecteur:focus-within {

}

Exemple

Définissons une couleur de fond bleue pour l'élément parent, lorsque son élément enfant input est en focus :

html<div>
  Entrez votre nom : <input name="user">
</div>

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

Результат:

Voir aussi