The :dir() pseudo-class allows you to target elements based on the directionality of their text content, specifically whether the text flows left-to-right (ltr) or right-to-left (rtl). This is especially useful for multilingual websites where content may dynamically switch between languages such as English, Arabic, or Hebrew. Unlike styling based on language alone, :dir() responds to the computed text direction, which can be inherited or influenced by parent elements, making it highly reliable for layout-sensitive styling.

The :dir() pseudo-class works by evaluating the directionality determined by the browser’s Unicode Bidirectional Algorithm. This direction can come from the HTML dir attribute, inherited direction from an ancestor (such as the html element), or implicit direction inferred from the text itself. Because of this, :dir() is particularly effective when styling components that must visually adapt depending on reading direction, such as icons, padding alignment, or text alignment rules.

A common use case is pairing :dir() with layout-related CSS properties such as direction or text-align. This allows you to create interfaces that automatically adjust without duplicating markup or relying on language-specific selectors. While similar in spirit to :lang(), the key difference is that :dir() reacts to direction, not language, making it more robust for mixed-language content.

Basic Example

<div dir="ltr" class="box">Left to right text</div>
<div dir="rtl" class="box">نص من اليمين إلى اليسار</div>

.box:dir(ltr) {
  text-align: left;
  padding-left: 1rem;
}

.box:dir(rtl) {
  text-align: right;
  padding-right: 1rem;
}

In this example, the same .box class adapts its layout automatically depending on the text direction. This is especially useful when building reusable UI components that must support both LTR and RTL languages without duplicating styles.

Nested Direction Example

<div dir="rtl">
  <p>This paragraph is RTL</p>
  <p dir="ltr">This one switches back to LTR</p>
</div>

p:dir(rtl) {
  border-right: 4px solid #444;
}

p:dir(ltr) {
  border-left: 4px solid #444;
}

Here, each paragraph is styled based on its own computed direction, even though one is nested inside a container with a different direction. This demonstrates how :dir() evaluates direction at the element level rather than relying solely on ancestors.

In practice, :dir() is ideal for internationalized layouts, bidirectional UI components, and accessibility-conscious design. It helps ensure that visual structure aligns naturally with reading flow, improving usability without additional markup or scripting.