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>
Pour voir l'effet, utilisez Firefox, car cette pseudo-classe ne fonctionne que sur Mozzila Firefox.

Support de Navigateurs

49.0+
17.0 - 48.0 -moz-


Trouvez-vous cela utile?

Articles Associées