:dir()

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die :dir()-Pseudo-Klasse (CSS-Pseudo-Klasse) wählt Elemente basierend auf der Schreibrichtung des in ihnen enthaltenen Textes aus.

css
/* Selects any element with right-to-left text */
:dir(rtl) {
  background-color: red;
}

Die Pseudo-Klasse :dir() nutzt ausschließlich den semantischen Wert der Schreibrichtung, d. h. den im Dokument selbst definierten. Die durch CSS-Eigenschaften wie direction gesetzte stilistische Schreibrichtung wird nicht berücksichtigt.

Hinweis: Beachten Sie, dass das Verhalten der :dir()-Pseudo-Klasse nicht dem der [dir=…]-Attributselektoren entspricht. Letztere wählen das HTML-Attribut dir aus und ignorieren Elemente, die dieses nicht enthalten – auch wenn sie eine Schreibrichtung von ihrem übergeordneten Element erben. (Ebenso stimmen [dir=rtl] und [dir=ltr] nicht mit dem auto-Wert überein.) Im Gegensatz dazu wird :dir() den von der Benutzeragentin berechneten Wert auswerten, auch wenn dieser geerbt wird.

Hinweis: In HTML wird die Schreibrichtung durch das Attribut dir bestimmt. Andere Dokumenttypen können andere Methoden verwenden.

Syntax

Die :dir()-Pseudo-Klasse erfordert einen Parameter, der die gewünschte Schreibrichtung beschreibt.

css
:dir([ltr | rtl]) {
  /* ... */
}

Parameter

ltr

Wählt Elemente mit links-nach-rechts-Schreibrichtung.

rtl

Wählt Elemente mit rechts-nach-links-Schreibrichtung.

Beispiele

HTML

html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

CSS

css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

Ergebnis

Spezifikationen

Specification
HTML
# selector-ltr
HTML
# selector-rtl
Selectors Level 4
# dir-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch