Pseudo Classe CSS :dir()

La pseudo-classe :dir() perrmet de cibler les éléments qui sont basés sur la directionnalité du texte y compris.

La :dir() ne sélectionne pas les éléments basés sur les états stylistiques, c'est pour cela la directionnalité d'un élément doit être spécifiée dans le document.

En HTML5, la directionnalité de l'élément peut être spécifiée en utilisant l'attribut dir.

Le sélecteur :dir() prend soit une valeur "rtl" ou "ltr".

Version

CSS4

Syntaxe

:dir() {
css declarations
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div:dir(ltr) {
      background-color: #1c87c9;
      }
      div:dir(rtl) {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :dir()</h2>
    <div dir="rtl">
      <span>exemple1</span>
      <div dir="ltr">
        exemple2
        <div dir="auto"> ففي </div>
      </div>
    </div>
  </body>
</html>