Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die :dir CSS Pseudoklasse matcht Elemente basierend auf der Direktionalität des in ihnen beinhalteten Texts. In HTML wird die Richtung durch das dir Attribut bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.

Beachte, dass die Verwendung der Pseudoklasse :dir() nicht gleichbedeutend mit den [dir=…] Attributselektoren ist. Letztere matchen einen Wert von dir und matchen nicht, falls kein Attribut gesetzt ist, auch wenn in diesem Fall das Elemente den Wert seines Elternelements erbt; ebenso matchen [dir=rtl] oder [dir=ltr] auch nicht den auto Wert, der für das dir Attribut verwendet werden kann. Im Gegensatz dazu matcht :dir() den vom User Agent berechneten, den geerbten oder den auto Wert.

Auch berücksichtigt :dir() nur den semantischen Wert der Ausrichtung, der innerhalb des Dokuments definiert wird, normalerweise in HTML. Er berücksichtigt nicht die Styling-Ausrichtung, die durch CSS Eigenschaften wie direction, welche rein stilistisch sind, gesetzt wird.

Syntax

/* element:dir(directionality) { Stileigenschaften }
   wobei die Richtungn ltr oder rtl ist */

div:dir(ltr) { /* Stileigenschaften */ }
span:dir(rtl) { /* Stileigenschaften */ }

Beispiele

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

In diesem Beispiel matcht :dir(rtl) den obersten div, span, welcher test1 beinhaltet und den div mit den hebräischen Zeichen. :dir(ltr) matcht den div, der test2 beinhaltet.

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von ':dir()' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:dir()
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 49
Vollständige Unterstützung 49
Keine Unterstützung 17 — 53
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 49
Vollständige Unterstützung 49
Keine Unterstützung 17 — 53
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,