:focus-visible-within

Pour commencer, connaissez-vous la différence entre les pseudos-classes :focus et :focus-visible ?

• :focus permet de marquer visuellement l’élément avec lequel on interagit à la souris ou au clavier ;
• :focus-visible fait la même chose, à la différence près qu’il laisse le navigateur choisir quand activer l’effet – ce qui se traduit généralement par :
  • une prise de focus uniquement visible au clavier ;
  • sauf pour les champs de formulaires de type « texte » (email, mot de passe, recherche, nombre, date…).

:focus-within

Cette pseudo-classe diffère des deux précédentes car elle ne cible pas l’élément avec lequel on interagit, mais un parent qui le contient.

C’est une pseudo-classe relativement récente mais qui semble bien maintenant moins puissante depuis que la pseudo-classe :has() est apparue.

:has() offre en effet bien plus de possibilités et peut reproduire très facilement le comportement de :focus-within avec un simple :has(:focus).

Anthony me fait à juste titre remarquer dans les commentaires qu’il faut adjoindre au sélecteur précédent un :focus pour couvrir les deux possibilités embarquées par :focus-within :

1. la prise de focus sur un des enfants ;
2. ou sur l’élément lui-même.

Et :focus-visible-within ?

Cette pseudo-classe n’existe pas.

Mais comme on vient de le voir, elle peut cependant s’émuler très facilement en changeant légèrement la pseudo-classe précédente. On obtient alors :

:focus-visible,
:has(:focus-visible) {

}

Et le tour est joué !

---

Ce CodePen vous permettra d’expérimenter les différentes prise de focus par vous-même.

---

Merci à mon collègue Marc qui m’a inspiré cet article en discutant pour la première fois avec moi de :focus-visible-within.