: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.
/* 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.
:dir([ltr | rtl]) {
/* ... */
}
Parameter
Beispiele
HTML
<div dir="rtl">
<span>test1</span>
<div dir="ltr">
test2
<div dir="auto">עִבְרִית</div>
</div>
</div>
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