Die :dir()Pseudoklasse in CSS ermöglicht die Auswahl von Elementen basierend auf der Richtung der Sprache, wie im HTML-Markup festgelegt. Es gibt wirklich nur zwei Richtungen, in denen die Sprache in einem Dokument fließen kann: von links nach rechts und von rechts nach links. Stellen Sie sich dies als eine Möglichkeit vor, Elemente zu stylen, die sich durch unterschiedliche Sprachrichtungen auszeichnen.
.item:dir(rtl) ( background: red; color: #fff; )Die Pseudoklasse akzeptiert nur einen einzelnen Wert und gibt null zurück, wenn mehr als ein Wert eingegeben wird.
Siehe den Pseudo-Selektor Pen: dir von Geoff Graham (@geoffgraham) auf CodePen.
:dir(rtl) vs. (dir=rtl)
Wir können ein Element auch basierend auf seiner Sprachrichtung auswählen, indem wir einen Match-Abfrage-Selektor verwenden:
.item(dir=rtl) ( background: red; color: #fff; )Das funktioniert zwar, unterscheidet sich jedoch :dir(rtl)darin, dass ein Element nur anhand der im HTML-Markup genau definierten Elemente ausgewählt wird. Auf der anderen Seite :dir(rtl)werden die Spracheinstellungen des Benutzeragenten herausgesucht und das Element ausgewählt, ohne explizit im HTML angegeben zu werden.
Dies ist eine große Sache, da Elemente, die die Sprachrichtung nicht explizit angeben, das dirAttribut des nächsten Vorfahren erben, der eines enthält. Dies kann zu einem Szenario führen, in dem die Verwendung (dir=rtl)zusätzliche Elemente auswählt, als Sie beabsichtigen.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| Nein | 17 * | Nein | Nein | Nein |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | 85 | Nein | Nein |
Mehr Informationen
- Selektoren Level 4 Spezifikation
- Chromium Issue # 576815
- WebKit-Fehler # 64861
- Mozilla-Dokumentation
- Microsoft Edge-Funktionsanforderung
- Chromium Platform Status
- PostCSS
:dir()polyfill