La pseudo-class CSS :focus-within
representa un element que ha rebut focus o conté un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class :focus
o té un descendent que està aparellat amb :focus
. (Això inclou descendents en arbres d'ombres.)
/* Selecciona un <div> quan un dels seus descendents està enfocat */
div:focus-within {
background: cyan;
}
Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet <form>
quan l'usuari se centra en un dels seus camps <input>
.
Sintaxi
:focus-within
Exemple
En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.
HTML
<p>Try typing into this form.</p>
<form>
<label for="given_name">Given Name:</label>
<input id="given_name" type="text">
<br>
<label for="family_name">Family Name:</label>
<input id="family_name" type="text">
</form>
CSS
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 4px;
}
Resultat
Especificacions
Especificació | Estat | Comentari |
---|---|---|
Selectors Level 4 The definition of ':focus-within' in that specification. |
Working Draft | Definició inicial |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | 60 | No support[1] | 52.0 (52.0)[2] | No support | 47 | 10.1 |
Descripció | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 60 | 60 | 52.0 (52.0)[2] | No support | 47 | 10.3 |
[1] Aquesta característica encara no està implementada. Consulteu la sol·licitud de millora relacionada.
[2] Aquesta característica es va implementar al errada 1176997.