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

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La pseudo-classe :dir permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut dir. Pour les autres types de document, cela peut être déterminé autrement.

/* Cible le contenu avec du texte écrit de droite à gauche */
:dir(rtl) {
  background-color: red;
}

On notera que la pseudo-classe :dir() ne fonctionne pas de la même façon que le sélecteur d'attribut [dir=…]. Ce dernier utilise la valeur de l'attribut dir et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon [dir=rtl] ou [dir=ltr] ne pourront pas correspondre à la valeur auto qui peut être utilisée sur l'attribut dir. Au contraire, :dir() calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille auto).

:dir() ne prend en compte que la valeur sémantique de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que direction.

Syntaxe

Syntaxe formelle

:dir( ltr | rtl )

Paramètres

direction
La direction du texte pour les éléments qu'on souhaite sélectionner.

Exemples

CSS

:-moz-dir(rtl) {
  color: lime;
}
 
:dir(rtl) {
  color: lime;
}

:-moz-dir(ltr) {
  color: black;
}

:dir(ltr) {
  color: black;
}

HTML

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

Résultat

:dir(rtl) permet de cibler le div de plus haut niveau, le span avec test1 et le div avec le texte constitué des caractères hébraïques.

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':dir(ltr)' dans cette spécification.
Standard évolutif Aucune modification.
Selectors Level 4
La définition de ':dir()' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support simple Pas de support[1] 17 (17) -moz
49 (49)[2]
Pas de support Pas de support[3] Pas de support[1] Pas de support[4]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support[1] 17.0 (17) -moz
49.0 (49)[2]
Pas de support Pas de support Pas de support[4]

[1] Cette fonctionnalité n'est pas encore implémentée à l'heure actuelle. Cf. Chromium bug 576815.

[2] La version standard de cette propriété est implémentée depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), la variante préfixée avec -moz fut retirée à partir de Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50).

[3] La demande de fonctionnalité pour Microsoft Edge sur UserVoice.

[4] Cette fonctionnalité n'est pas encore implémentée à l'heure actuelle. Cf. WebKit bug 64861.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB
 Dernière mise à jour par : SphinxKnight,