: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

Siehe auch