W3docs
fr
Se connecter

CSS :dir() Pseudo Class

La pseudo-classe :dir() correspond aux éléments selon la directionnalité du texte. Exemples et explications.

La pseudo-classe :dir() correspond aux éléments en fonction de la directionnalité du texte qu'ils contiennent — c'est-à-dire si le texte s'écoule de gauche à droite (comme en français) ou de droite à gauche (comme en arabe ou en hébreu).

Cela est utile lorsque vous construisez une mise en page qui doit s'adapter aux deux directions : au lieu d'écrire des règles séparées et de basculer des classes depuis JavaScript, vous laissez le navigateur styliser chaque élément en fonction de la direction du texte résolue.

La pseudo-classe :dir() ne tient pas compte d'un état stylistique — elle lit la directionnalité que le document lui-même résout pour l'élément. Cette direction provient de l'attribut HTML dir, qui peut être défini à ltr, rtl ou auto, ou est hérité d'un ancêtre.

Le sélecteur accepte l'une de deux valeurs :

  • :dir(ltr) correspond aux éléments dont la directionnalité résolue est de gauche à droite.
  • :dir(rtl) correspond aux éléments dont la directionnalité résolue est de droite à gauche.

Toute autre valeur est invalide et le sélecteur ne correspondra tout simplement pas. Notez que :dir(rtl) correspond en fonction de la direction résolue, donc un élément défini à dir="auto" dont le premier caractère fort est arabe sera mis en correspondance par :dir(rtl).

:dir(rtl) vs. [dir=rtl]

Il est tentant d'utiliser le sélecteur d'attribut [dir=rtl] à la place, mais les deux se comportent différemment :

  • [dir=rtl] correspond uniquement lorsque l'attribut dir est littéralement écrit sur cet élément dans le balisage.
  • :dir(rtl) correspond chaque fois que la directionnalité de l'élément se résout en droite à gauche — même si dir est hérité d'un ancêtre ou calculé depuis dir="auto".

Les éléments sans dir explicite héritent la directionnalité de leur ancêtre le plus proche qui en possède un. Dans ce cas, [dir=rtl] ne correspond pas à l'enfant héritant (l'attribut n'est pas sur lui), alors que :dir(rtl) le fait. Préférez :dir() lorsque vous souhaitez suivre la direction effective plutôt que l'attribut brut.

L'inconvénient est la compatibilité des navigateurs : :dir() est plus récent, donc si vous avez besoin d'un recours pour les très anciens moteurs, le sélecteur d'attribut est le choix plus sûr.

Version

Selectors Level 4

Syntaxe

Syntaxe CSS :dir()

:dir(ltr) {
  css declarations
}

Exemple du sélecteur :dir() :

Exemple de code CSS :dir()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:dir(ltr) {
        background-color: #1c87c9;
      }
      div:dir(rtl) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:dir() selector example</h2>
    <div dir="rtl">
      <span>example1</span>
      <div dir="ltr">
        example2
        <div dir="auto"> ففي </div>
      </div>
    </div>
  </body>
</html>
Essayez vous-même »

Ici, le <div dir="rtl"> extérieur rend son bloc de droite à gauche, il est donc stylisé en vert par div:dir(rtl). Le <div dir="ltr"> intérieur remplace cela en gauche à droite et est stylisé en bleu par div:dir(ltr). Le <div dir="auto"> le plus intérieur contient du texte arabe, donc sa direction se résout en droite à gauche et il devient également vert — quelque chose que [dir=rtl] ne pourrait jamais détecter.

Hériter de la direction sans répéter l'attribut

Une utilisation pratique de :dir() est le stylisme de contenu profondément imbriqué où seul un ancêtre porte l'attribut dir. Chaque paragraphe ci-dessous hérite de rtl, pourtant aucun ne le déclare :

<!DOCTYPE html>
<html>
  <head>
    <title>Inherited direction</title>
    <style>
      p:dir(rtl) {
        border-inline-start: 4px solid #8ebf42;
        padding-inline-start: 10px;
      }
    </style>
  </head>
  <body dir="rtl">
    <article>
      <p>مرحبا بالعالم</p>
      <p>هذه فقرة أخرى</p>
    </article>
  </body>
</html>

[dir=rtl] p fonctionnerait ici uniquement parce que l'ancêtre est mis en correspondance en premier, mais p[dir=rtl] ne correspondrait à rien — les paragraphes ne portent jamais l'attribut. p:dir(rtl) les correspond directement. Le combiner avec des propriétés logiques comme border-inline-start maintient le design correct dans les deux directions automatiquement.

Note

Cette pseudo-classe est prise en charge par tous les navigateurs modernes, notamment Chrome, Edge, Safari et Firefox.

Concepts associés

Pratique

Pratique
Quel est le rôle de la propriété 'dir' en CSS ?
Quel est le rôle de la propriété 'dir' en CSS ?
Was this page helpful?