We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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.

Vegeu també

Document Tags and Contributors

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