This translation is incomplete. Please help translate this article from English.

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

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.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,