CSS : La pseudo-classe :dir()

La pseudo-classe :dir() correspond aux éléments dont la directionnalité est déterminée par le texte qu'ils contiennent.

La pseudo-classe :dir() ne sélectionne pas en fonction d'états stylistiques ; la directionnalité d'un élément doit donc être spécifiée dans le document.

En HTML5, la directionnalité d'un élément peut être spécifiée à l'aide de l'attribut dir.

Le sélecteur :dir() peut prendre les valeurs "ltr" ou "rtl".

La pseudo-classe :dir(ltr) correspond aux éléments ayant une directionnalité de gauche à droite. La pseudo-classe :dir(rtl) correspond aux éléments ayant une directionnalité de droite à gauche. Toute autre valeur est invalide.

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

Il existe une différence entre :dir(rtl) et [dir=rtl]. [dir=rtl] ne sélectionne un élément que si l'attribut est strictement défini dans le code HTML. :dir(rtl) sélectionne l'élément même si la directionnalité n'est pas explicitement indiquée dans HTML. Les éléments sans direction explicite héritent de l'attribut dir de leur ancêtre le plus proche qui en possède un. Dans ces cas, [dir=rtl] ne correspond pas aux éléments hérités, contrairement à :dir(rtl).

Version

Selectors Level 4

Syntaxe

Syntaxe CSS de :dir()

css

:dir(ltr) {
  css declarations
}

Exemple du sélecteur `:dir()` :

Exemple de code CSS pour :dir()

html

<!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>

Try it Yourself »

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

Pratique

Quel est l'objectif de la propriété 'dir' en CSS ?

Elle permet à l'utilisateur de spécifier la direction du texte.Elle modifie la couleur de fond du texte.Elle est utilisée pour aligner le texte.Elle peut déterminer si le texte doit être affiché de droite à gauche ou de gauche à droite.

CSS : La pseudo-classe :dir() ​

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

Version ​

Syntaxe ​