Pseudo-klassen focus-within
Pseudo-klassen focus-within anger stilen
för element som är i fokus.
Till skillnad från pseudo-klassen focus, som anger
stilen direkt för själva elementet, sätter focus-within
stilen för föräldraelementet.
Syntax
selektor:focus-within {
}
Exempel
Låt oss ange en ljusblå bakgrundsfärg för föräldraelementet, när dess underordnade input-element är i fokus:
<div>
Ange ditt namn: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Se även
-
pseudo-klassen
:indeterminate,
som anger stilen för växlar som befinner sig i ett obestämt tillstånd -
pseudo-klassen
:default,
som anger stilen för standardelement -
pseudo-klassen
:fullscreen,
som anger stilen för element i fullskärmsläge -
pseudo-klassen
:placeholder-shown,
som anger stilen för element när platshållartext visas -
egenskapen
caret-color,
som anger färgen för textmarkören i input
