CSS :dir()-Pseudoklasse

Die :dir()-Pseudoklasse wählt Elemente aus, die auf der Schreibrichtung des darin enthaltenen Textes basieren.

Die :dir()-Pseudoklasse wählt nicht basierend auf stilistischen Zuständen aus, weshalb die Schreibrichtung eines Elements im Dokument angegeben werden muss.

In HTML5 kann die Schreibrichtung eines Elements mithilfe des dir-Attributs angegeben werden.

Der :dir()-Selektor kann entweder den Wert „ltr" oder „rtl" annehmen.

Die Pseudoklasse :dir(ltr) wählt Elemente aus, die eine Schreibrichtung von links nach rechts haben. Die Pseudoklasse :dir(rtl) wählt Elemente aus, die eine Schreibrichtung von rechts nach links haben. Andere Werte sind ungültig.

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

Es gibt einen Unterschied zwischen :dir(rtl) und [dir=rtl]. [dir=rtl] wählt ein Element nur aus, wenn das Attribut strikt im HTML-Markup definiert ist. :dir(rtl) wählt das Element auch dann aus, wenn die Schreibrichtung nicht explizit in HTML angegeben ist. Elemente ohne explizite Richtung erben das dir-Attribut von ihrem nächsten Vorfahren, der eines besitzt. In diesen Fällen trifft [dir=rtl] nicht auf die geerbten Elemente zu, während :dir(rtl) dies tut.

Version

Selectors Level 4

Syntax

CSS :dir()-Syntax

css

:dir(ltr) {
  css declarations
}

Beispiel für den :dir()-Selektor:

CSS :dir()-Codebeispiel

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 »

Hinweis
Diese Pseudoklasse wird in allen modernen Browsern unterstützt, einschließlich Chrome, Edge, Safari und Firefox.

Praxis

Was ist der Zweck der Eigenschaft 'dir' in CSS?

Sie ermöglicht es dem Benutzer, die Richtung des Textes anzugeben.Sie ändert die Hintergrundfarbe des Textes.Sie wird verwendet, um Text auszurichten.Sie kann festlegen, ob der Text von rechts nach links oder von links nach rechts gerendert werden soll.

CSS :dir()-Pseudoklasse ​

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

Version ​

Syntax ​