: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 passt auf Elemente basierend auf der Textausrichtung, die in ihnen enthalten ist.
/* Selects any element with right-to-left text */ :dir(rtl) { background-color: red; } Die :dir()-Pseudoklasse verwendet nur den semantischen Wert der Richtung, d.h. denjenigen, der im Dokument selbst definiert ist. Sie berücksichtigt nicht die stilistische Richtung, d.h. die durch CSS-Eigenschaften wie direction gesetzte Richtung.
Hinweis: Beachten Sie, dass das Verhalten der :dir()-Pseudoklasse nicht äquivalent zu den [dir=…] Attributselektoren ist. Letztere passen auf das HTML-Attribut dir und ignorieren Elemente, die es nicht haben – selbst wenn sie eine Richtung von ihrem Elternteil erben. (Ähnlich werden [dir=rtl] und [dir=ltr] nicht den auto-Wert treffen.) Im Gegensatz dazu passt :dir() den vom Benutzeragenten berechneten Wert, selbst wenn er geerbt wurde.
Hinweis: In HTML wird die Richtung durch das dir-Attribut bestimmt. Andere Dokumenttypen können andere Methoden haben.
Syntax
:dir([ltr | rtl]) { /* ... */ } Parameter
Die :dir()-Pseudoklasse erfordert einen Parameter, der die gewünschte Textausrichtung angibt.
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 # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |
Browser-Kompatibilität
Loading…