Pseudoklasse focus-within

De pseudoklasse focus-within bepaalt de stijl voor elementen die in focus zijn. In tegenstelling tot de pseudoklasse focus, die de stijl direct aan het element zelf toekent, kent focus-within de stijl toe aan het bovenliggende element.

Syntaxis

cssselector:focus-within {

}

Voorbeeld

Laten we een lichtblauwe achtergrondkleur instellen voor het bovenliggende element wanneer zijn onderliggende invoerveld in focus is:

html<div>
  Voer uw naam in: <input name="user">
</div>

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

Результат:

Zie ook