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
selector:focus-within {
}
Voorbeeld
Laten we een lichtblauwe achtergrondkleur instellen voor het bovenliggende element wanneer zijn onderliggende invoerveld in focus is:
<div>
Voer uw naam in: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Zie ook
-
pseudoklasse
:indeterminate,
die de stijl bepaalt voor schakelaars die zich in een onbepaalde status bevinden -
pseudoklasse
:default,
die de stijl bepaalt voor standaardelementen -
pseudoklasse
:fullscreen,
die de stijl bepaalt voor elementen in de volledig scherm-modus -
pseudoklasse
:placeholder-shown,
die de stijl bepaalt voor elementen wanneer hinttekst wordt weergegeven -
eigenschap
caret-color,
die de kleur van de tekstcursor in een invoerveld bepaalt
