:focus-within

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

Navegadors compatibles

[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é

• :focus