: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 Pseudo-Klasse wählt Elemente basierend auf der Richtung des in ihnen enthaltenen Textes aus.
/* Selects any element with right-to-left text */
:dir(rtl) {
background-color: red;
}
Die :dir() Pseudo-Klasse verwendet nur den semantischen Wert der Richtung, d.h., den im Dokument selbst definierten. Sie berücksichtigt nicht die stilistische Richtung, d.h., die durch CSS-Eigenschaften wie direction festgelegte Richtung.
Hinweis:
Beachten Sie, dass das Verhalten der :dir() Pseudo-Klasse nicht dem der [dir=…] Attributselektoren entspricht. Letztere richten sich nach dem HTML-Attribut dir und ignorieren Elemente, die es nicht haben—selbst wenn sie eine Richtung von ihrem übergeordneten Element erben. (Ebenso werden [dir=rtl] und [dir=ltr] nicht den auto Wert treffen.) Im Gegensatz dazu wird :dir() den vom User Agent berechneten Wert treffen, selbst wenn er geerbt wird.
Hinweis:
In HTML wird die Richtung durch das dir Attribut bestimmt. Andere Dokumenttypen können unterschiedliche Methoden haben.
Syntax
:dir([ltr | rtl]) {
/* ... */
}
Parameter
Die :dir() Pseudo-Klasse erfordert einen Parameter, der die Textausrichtung darstellt, 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
| Specification |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |
Browser-Kompatibilität
Loading…