La :dir()pseudo-classe en CSS permet de sélectionner des éléments en fonction de la direction du langage, comme déterminé dans le balisage HTML. Il n'y a vraiment que deux directions dans lesquelles la langue peut circuler dans un document, qui sont de gauche à droite et de droite à gauche. Considérez cela comme un moyen de styliser des éléments qui se distinguent par une directionnalité du langage différente.
.item:dir(rtl) ( background: red; color: #fff; )La pseudo-classe n'accepte qu'une seule valeur et retournera null si plusieurs valeurs sont entrées.
Voir le pseudo-sélecteur Pen: dir de Geoff Graham (@geoffgraham) sur CodePen.
:dir(rtl) contre. (dir=rtl)
Nous pouvons également sélectionner un élément en fonction de sa direction de langue en utilisant un sélecteur de requête de correspondance:
.item(dir=rtl) ( background: red; color: #fff; )Cela fonctionne en effet, mais est différent du fait :dir(rtl)que cela ne sélectionne un élément que par ce qui est strictement défini dans le balisage HTML. D'un autre côté, :dir(rtl)reniflera les préférences de langue de l'agent utilisateur et sélectionnera l'élément sans être explicitement indiqué dans le HTML.
C'est un gros problème car les éléments qui n'indiquent pas explicitement la direction du langage hériteront de l' dirattribut de son ancêtre le plus proche qui en contient un. Cela peut conduire à un scénario dans lequel l'utilisation (dir=rtl)sélectionne des éléments supplémentaires que vous ne souhaitez.
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.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| Non | 17 * | Non | Non | Non |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| Non | 85 | Non | Non |
Plus d'information
- Spécification des sélecteurs niveau 4
- Chromium Issue # 576815
- Bogue WebKit n ° 64861
- Documentation Mozilla
- Demande de fonctionnalité Microsoft Edge
- État de la plate-forme Chromium
- PostCSS
:dir()polyfill