W3docs
de
Anmelden

CSS :dir() Pseudo-Klasse

Die :dir() CSS-Pseudo-Klasse trifft Elemente basierend auf der Textausrichtung. Lesen Sie mehr und probieren Sie Beispiele aus.

Die :dir()-Pseudo-Klasse trifft Elemente basierend auf der Textausrichtung des enthaltenen Textes — das heißt, ob der Text von links nach rechts (wie im Deutschen) oder von rechts nach links (wie im Arabischen oder Hebräischen) fließt.

Dies ist nützlich, wenn Sie ein Layout erstellen, das sich an beide Ausrichtungen anpassen muss: Anstatt separate Regeln zu schreiben und Klassen per JavaScript umzuschalten, lässt man den Browser jedes Element entsprechend seiner aufgelösten Textausrichtung stylen.

Die :dir()-Pseudo-Klasse berücksichtigt keinen stilistischen Zustand — sie liest die Ausrichtung, die das Dokument selbst für das Element auflöst. Diese Ausrichtung stammt aus dem dir-HTML-Attribut, das auf ltr, rtl oder auto gesetzt oder von einem Vorfahren geerbt werden kann.

Der Selektor akzeptiert einen von zwei Werten:

  • :dir(ltr) trifft Elemente, deren aufgelöste Ausrichtung links nach rechts ist.
  • :dir(rtl) trifft Elemente, deren aufgelöste Ausrichtung rechts nach links ist.

Jeder andere Wert ist ungültig und der Selektor trifft schlichtweg nichts. Beachten Sie, dass :dir(rtl) auf der aufgelösten Ausrichtung basiert, sodass ein Element mit dir="auto", dessen erstes starkes Zeichen Arabisch ist, von :dir(rtl) getroffen wird.

:dir(rtl) vs. [dir=rtl]

Es ist verlockend, stattdessen den Attributselektor [dir=rtl] zu verwenden, aber die beiden verhalten sich unterschiedlich:

  • [dir=rtl] trifft nur dann, wenn das dir-Attribut buchstäblich auf diesem Element im Markup steht.
  • :dir(rtl) trifft immer dann, wenn die Ausrichtung des Elements zu rechts-nach-links auflöst — auch wenn dir von einem Vorfahren geerbt oder aus dir="auto" berechnet wird.

Elemente ohne explizites dir erben die Ausrichtung von ihrem nächsten Vorfahren, der eines besitzt. In diesem Fall trifft [dir=rtl] das erbende Kind nicht (das Attribut ist nicht auf ihm), während :dir(rtl) es trifft. Bevorzugen Sie :dir(), wenn Sie der effektiven Ausrichtung folgen möchten statt dem rohen Attribut.

Die Kehrseite ist die Browser-Unterstützung: :dir() ist neuer, daher ist der Attributselektor die sicherere Wahl, wenn Sie einen Fallback für sehr alte Browser benötigen.

Version

Selectors Level 4

Syntax

CSS :dir()-Syntax

:dir(ltr) {
  css declarations
}

Beispiel des :dir()-Selektors:

CSS :dir()-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:dir(ltr) {
        background-color: #1c87c9;
      }
      div:dir(rtl) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:dir() selector example</h2>
    <div dir="rtl">
      <span>example1</span>
      <div dir="ltr">
        example2
        <div dir="auto"> ففي </div>
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Hier macht das äußere <div dir="rtl"> seinen Block rechts-nach-links, sodass er durch div:dir(rtl) grün gestylt wird. Das innere <div dir="ltr"> überschreibt das auf links-nach-rechts und wird durch div:dir(ltr) blau gestylt. Das innerste <div dir="auto"> enthält arabischen Text, sodass seine Ausrichtung zu rechts-nach-links auflöst und es ebenfalls grün wird — etwas, das [dir=rtl] niemals erfassen könnte.

Ausrichtung erben ohne das Attribut zu wiederholen

Ein praktischer Einsatz von :dir() ist das Styling tief verschachtelter Inhalte, bei denen nur ein Vorfahre das dir-Attribut trägt. Jeder Absatz unten erbt rtl, ohne es jedoch selbst zu deklarieren:

<!DOCTYPE html>
<html>
  <head>
    <title>Inherited direction</title>
    <style>
      p:dir(rtl) {
        border-inline-start: 4px solid #8ebf42;
        padding-inline-start: 10px;
      }
    </style>
  </head>
  <body dir="rtl">
    <article>
      <p>مرحبا بالعالم</p>
      <p>هذه فقرة أخرى</p>
    </article>
  </body>
</html>

[dir=rtl] p würde hier funktionieren, weil der Vorfahre zuerst getroffen wird, aber p[dir=rtl] würde nichts treffen — die Absätze tragen das Attribut nie. p:dir(rtl) trifft sie direkt. Die Kombination mit logischen Eigenschaften wie border-inline-start hält das Design in beiden Ausrichtungen automatisch korrekt.

Hinweis

Diese Pseudo-Klasse wird in allen modernen Browsern unterstützt, einschließlich Chrome, Edge, Safari und Firefox.

Verwandte Konzepte

Practice

Übung
Was ist der Zweck der 'dir'-Eigenschaft in CSS?
Was ist der Zweck der 'dir'-Eigenschaft in CSS?
Was this page helpful?