:dir() - Sélecteur CSS

Description de la pseudo-classe :dir().

La pseudo-classe :dir() sélectionne des éléments en fonction de leur direction d'écriture : de gauche à droite pour les langues européennes ou de droite à gauche pour les langues arabes.

:dir() tente de déterminer le vrai sens d'écriture de l'élément en utilisant l'attribut dir des balises HTML, ou, à défaut, l'algorithme du navigateur qui se base lui, sur les caractères rencontrés dans le texte. La propriété CSS direction n'est pas prise en compte.

Les sélecteurs avec un critère [dir='...'] semblent faire double emploi avec la pseudo-classe :dir(), mais les exemples ci-dessous montrent qu'ils se différencient dans de nombreux cas.

Exemples d'utilisation de la pseudo-classe :dir().

Comparaison entre la pseudo-classe dir(rtl) et le critère [dir='rtl']

Les exemples ci-dessous comparent l'effet de la pseudo-classe dir(rtl) avec celui d'un sélecteur avec critère [dir=rtl] dans différents cas de figure : attribut dir présent ou absent dans le code HTML, etc.

Si la pseudo-classe s'active, le texte apparaît en rouge.
Si c'est le sélecteur avec critère qui s'active, le texte s'affiche en souligné.

Attention ! De nombreux navigateurs ne traitent pas la pseudo-classe :dir(). Nous vous conseillons d'utiliser Firefox pour visualiser les exemples suivants.

Le code CSS est identique pour tous les exemples.

Pas d'attribut dir dans le code HTML :

Aucune information sur le sens d'écriture n'est présente dans le code HTML et les style ne spécifient rien non plus. La pseudo-classe :dir(rtl) n'est pas active, ni le sélecteur avec le critère [dir='rtl']. D'ailleurs, on voit que le texte n'est pas correctement présenté puisqu'il devrait s'écrire de droite à gauche.

Attribut dir présent :

L'attribut dir est présent dans le code HTML et aucun style complémentaire ne spécifie de direction d'écriture. La pseudo-classe :dir(rtl) ET le sélecteur avec critère sont tous les deux activés.

Attribut présent avec une valeur différente.

L'attribut dir est présent dans le code HTML. Cependant ni la pseudo-classe :dir(ltr), ni le sélecteur avec critère ne sont activés car la valeur ne correspond pas (ltr au lieu de rtl).

Direction du texte déterminée de façon automatique.

L'attribut dir est présent dans la balise avec la valeur auto. pas de styles particulier pour indiquer la direction. Le navigateur ayant décidé d'une écriture de droite à gauche (à cause des caractères rencontrés), la pseudo-classe :dir(rtl) est active, contrairement au sélecteur avec critère [dir='rtl'] qui n'a pas été activé.

Direction déterminée en CSS :

La propriété CSS direction est présente mais considérée comme une mise en forme et n'active ni la pseudo-classe :dir(), ni le sélecteur avec critère.

Compatibilité des navigateur avec :dir().

La pseudo-classe :dir() est encore peu reconnue par les navigateurs (2022). Reportez vous au tableau de compatibilité ci-dessous.

1

Pseudo-classe
:dir()

Estimation de la prise en charge globale.

90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe :dir().

• Sélecteurs - Niveau 4

  Concernant :dir(). Introduction de la pseudo-classe :dir() dans ce niveau 4 de la spécification.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

Vous pouvez aussi consulter la page sur les sélecteurs ci-dessous, qui sont également en rapport avec la langue ou le mode d'écriture.