: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() CSS Pseudoklasse wählt Elemente basierend auf der Textrichtung aus, die sie enthalten.

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

Die :dir() Pseudoklasse benutzt nur den semantischen Wert der Textrichtung, d.h. den im Dokument selbst definierten. Sie berücksichtigt nicht die stilistische Textrichtung, also die Textrichtung, die durch CSS-Eigenschaften wie direction festgelegt ist.

Hinweis: Beachten Sie, dass das Verhalten der :dir() Pseudoklasse nicht äquivalent zu den [dir=…] Attributselektoren ist. Letztere wählen das HTML-Attribut dir und ignorieren Elemente, denen es fehlt — selbst wenn sie eine Richtung von ihrem Elternteil erben. (Ähnlich werden [dir=rtl] und [dir=ltr] den Wert auto nicht erfassen.) Im Gegensatz dazu wird :dir() den vom User-Agent berechneten Wert erfassen, auch wenn er vererbt wurde.

Hinweis: In HTML wird die Richtung durch das dir Attribut bestimmt. Andere Dokumenttypen können unterschiedliche Methoden haben.

Syntax

Die :dir() Pseudoklasse benötigt einen Parameter, der die Textrichtung angibt, die Sie anvisieren möchten.

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

Parameter

ltr

Elemente mit Links-nach-Rechts-Richtung anvisieren.

rtl

Elemente mit Rechts-nach-Links-Richtung anvisieren.

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 Standard
# selector-ltr
Selectors Level 4
# the-dir-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch