Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
: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()CSSPseudo-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 densemantischen Wert der Richtung, d.h. den im Dokument selbst definierten. Sie berücksichtigt nicht diestilistische Richtung, d.h. die durch CSS-Eigenschaften wiedirection festgelegte Richtung.
Hinweis:Beachten Sie, dass das Verhalten der:dir() Pseudo-Klasse nicht dem der[dir=…]Attributselektoren entspricht. Letztere richten sich nach dem HTML-Attributdir 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 denauto Wert treffen.) Im Gegensatz dazu wird:dir() den vomUser Agent berechneten Wert treffen, selbst wenn er geerbt wird.
Hinweis:In HTML wird die Richtung durch dasdir 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 |