:dir() CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
Die :dir() CSS Pseudoklasse wählt Elemente basierend auf der Textausrichtung der in ihnen enthaltenen Texte aus.
/* Selects any element with right-to-left text */
:dir(rtl) {
background-color: red;
}
Die :dir()-Pseudoklasse nutzt nur den semantischen Wert der Textausrichtung, d.h. den, der im Dokument selbst definiert ist. Sie berücksichtigt nicht die stilistische Ausrichtung, also die Ausrichtung, die durch CSS-Eigenschaften wie direction festgelegt wird.
Hinweis:
Beachten Sie, dass das Verhalten der :dir()-Pseudoklasse nicht dem der [dir=…] Attributselektoren entspricht. 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 mit dem auto-Wert übereinstimmen.) 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 Attribut dir bestimmt. Andere Dokumenttypen könnten andere Methoden haben.
Syntax
:dir([ltr | rtl]) {
/* ... */
}
Parameter
Die :dir()-Pseudoklasse verlangt einen Parameter, der die Textausrichtung repräsentiert, die Sie anvisieren möchten.
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
| Spezifikation |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |