: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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:dir()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch