: concentration intérieure - Astuces CSS

Le :focus-withinpseudo sélecteur en CSS est un peu inhabituel, bien que bien nommé et plutôt intuitif. Il sélectionne un élément si cet élément contient des enfants qui ont :focus.

form:focus-within ( background: lightyellow; )

Ce qui fonctionne comme ça…

J'ai dit «inhabituel» car il n'est pas courant en CSS de pouvoir sélectionner un élément parent en fonction de l'existence ou de l'état des éléments enfants. Bien sûr, c'est utile!

Voici un exemple de formulaire pour l'essayer:

Voir le formulaire réactif Pen Simple avec: focus-within par Chris Coyier (@chriscoyier) sur CodePen.

Notez que l'exemple utilise :focus-withinsur l'ensemble du formulaire et sur l'habillage d'entrée intérieur

Toute façon dont un élément enfant peut devenir focalisé déclenchera: focus-inside. Par exemple, si un élément a un attribut tab-indexou contenteditable, alors c'est un élément focalisable et fonctionnera. La façon dont l'élément est devenu concentré n'a pas non plus d'importance. Il pourrait être cliqué ou tapé, il pourrait avoir été tabulé ou consulté par d'autres moyens, ou même ciblé via JavaScript, comme…

document.querySelector("input").focus();

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.