:dir()
Baseline 2023Newly 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.
/* 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.
: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 # selector-ltr |
HTML # selector-rtl |
Selectors Level 4 # dir-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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.