MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Sumari

La pseudo-classe CSS :focus-within s'aplica a tots els elements pels quals s'aplica la pseudo-classe :focus i, a més, a tots els descendents d'ombra inclosos. És a dir, que s'aplica quan un element ha rebut el focus, ja sigui des de la selecció feta per l'usuari amb l'ús del teclat o mitjançant l'activació amb el ratolí (per exemple, una entrada de formulari).

Incloent descendents d'ombra vol dir que l'element és o bé el descendent d'un altre element o l'element arrel de l'element és un shadow root.

Aquesta pseudo classe només s'aplica a l'element enfocat, no els seus pares, com :checked i :enabled però a diferència de :active o :hover.

Sintaxi

:focus-within { style properties }

Exemples

.first-name:focus-within {
  color: red;
}

.last-name:focus-within {
  color: lime;
}
<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':focus-within' in that specification.
Working Draft Definició inicial

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic No support[1] No support[2] 52.0 (52.0)[3] No support No support No support[4]
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic No support[1] 52.0 (52.0)[3] No support No support No support

[1] Aquesta característica encara no s'ha implementat . Veure Chromium errada 617371.

[2] Aquesta característica encara no s'ha implementat . Veure la sol.licitud de millora relacionada.

[3] Aquesta característica es va implementar en el errada 1176997.

[4] Aquesta característica es va implementar en el Safari Technology Preview des de la release 8.0.

Document Tags and Contributors

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