`:dir()` - Sélecteur CSS

:dir()

Résumé des caractéristiques du sélecteur `:dir()`

Description rapide

Pseudo-classe permettant de désigner des éléments en fonction du sens d'écriture

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

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 : 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 : 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.

div class="exemple1"

النص باللغة العربية.

/div

Attribut `dir` présent :

L'attribut dir est présent dans le code HTML : la pseudo-classe :dir(rtl) ET le sélecteur avec critère sont tous les deux activés.

div class="exemple1" dir="rtl".

النص باللغة العربية.

/div

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).

div class="exemple1" dir="ltr".

النص باللغة العربية.

/div

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

L'attribut dir est présent dans la balise avec la valeur auto. 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é.

div class="exemple1" dir="auto"

النص باللغة العربية.

/div