CSS :dir() Pseudo-Class

CSS :dir() Pseudo-Class

The CSS :dir() pseudo-class selects elements based on their text direction. It distinguishes between left-to-right (LTR) and right-to-left (RTL) content, making it useful for multilingual websites and layouts that support languages with different writing directions.

:dir() Syntax

:dir(direction) {
  property: value;
}

The :dir() pseudo-class requires a direction argument. The two supported values are ltr and rtl.

Example Syntax

:dir(ltr) {
  text-align: left;
}
:dir(rtl) {
  text-align: right;
}

The first rule targets elements with left-to-right directionality. The second targets elements with right-to-left directionality.

The :dir() pseudo-class has a specificity of 0-1-0. Combined with a type selector such as p:dir(rtl), its specificity becomes 0-1-1.

How :dir() Works

The :dir() pseudo-class matches an element according to its directionality as determined by the document language and browser.

In HTML, the dir attribute can establish an element's directionality. Elements can also inherit directionality from their ancestors, or have their direction determined automatically when dir="auto" is used.

Expected Matching Behavior

Unlike an attribute selector, :dir() does not require the matching element to have its own dir attribute.

Important: The :dir() pseudo-class matches HTML directionality, not simply the computed value of the CSS direction property. Setting direction: rtl in CSS does not, by itself, make an element match :dir(rtl).

:dir() Direction Values

The pseudo-class supports two direction values.

Supported Values

Left-to-Right Content

<p dir="ltr">This text reads from left to right.</p>

p:dir(ltr) {
  border-left: 4px solid #0088cc;
  padding-left: 12px;
}

The paragraph matches :dir(ltr) because its directionality is left to right.

Right-to-Left Content

<p dir="rtl">مرحبا بالعالم</p>

p:dir(rtl) {
  border-right: 4px solid #27ae60;
  padding-right: 12px;
}

The paragraph matches :dir(rtl) because its directionality is right to left.

Automatic Direction

<p dir="auto">مرحبا بالعالم</p>

With dir="auto", the browser examines the content to determine its directionality. In this example, the Arabic text establishes right-to-left directionality, so the paragraph matches :dir(rtl).

The value auto belongs to the HTML dir attribute. It is not a valid argument for the CSS :dir() pseudo-class.

Direction Inheritance

An element can match :dir() even without its own dir attribute because directionality can be inherited from a parent element.

HTML

<section dir="rtl">
  <h2>عنوان القسم</h2>
  <p>هذا نص باللغة العربية.</p>
</section>

CSS

section:dir(rtl) {
  border-right: 4px solid #27ae60;
}
section p:dir(rtl) {
  padding-right: 12px;
  text-align: right;
}

Both the section and its paragraph match :dir(rtl), even though only the section has an explicit dir attribute.

Overriding Inherited Direction

<section dir="rtl">
  <p>هذا نص باللغة العربية.</p>
  <p dir="ltr">This paragraph reads left to right.</p>
</section>

The first paragraph inherits right-to-left directionality. The second paragraph explicitly establishes left-to-right directionality and matches :dir(ltr).

:dir() vs. Attribute Selectors

The :dir() pseudo-class and the CSS [dir] attribute selector are not interchangeable.

Example

<div dir="rtl">
  <p>مرحبا بالعالم</p>
</div>

p:dir(rtl) {
  color: #0088cc;
}
p[dir="rtl"] {
  font-weight: bold;
}

The paragraph matches p:dir(rtl) because it inherits right-to-left directionality. It does not match p[dir="rtl"] because the paragraph itself has no dir attribute.

Use :dir() when the element's actual directionality matters. Use an attribute selector when you specifically need to identify the presence or value of an HTML attribute.

Practical Uses

The :dir() pseudo-class helps adapt interface styling to left-to-right and right-to-left content.

Adjusting Text Alignment

.message:dir(ltr) {
  text-align: left;
}
.message:dir(rtl) {
  text-align: right;
}

These rules align messages according to their directionality. For many layouts, text-align: start is a simpler direction-aware alternative.

Positioning Decorative Borders

.notice:dir(ltr) {
  border-left: 4px solid #0088cc;
  padding-left: 12px;
}
.notice:dir(rtl) {
  border-right: 4px solid #0088cc;
  padding-right: 12px;
}

The decorative border appears on the starting side of the notice, depending on its directionality.

Using Logical Properties

.notice {
  border-inline-start: 4px solid #0088cc;
  padding-inline-start: 12px;
  text-align: start;
}

CSS logical properties often eliminate the need for separate direction-specific rules. The border and padding automatically follow the inline starting side of the element.

Changing Direction-Specific Icons

.next-icon:dir(ltr)::after {
  content: " →";
}
.next-icon:dir(rtl)::after {
  content: " ←";
}

This example changes a directional arrow according to the element's text direction. Use direction-specific icons only when their meaning should change with the reading direction.

Best Practices

• Use :dir(ltr) and :dir(rtl) to style elements according to their directionality.
• Set the HTML dir attribute when the content's reading direction needs to be explicitly identified.
• Use dir="auto" for user-generated content when its direction cannot be predicted.
• Remember that :dir() can match elements that inherit directionality from an ancestor.
• Do not assume that setting the CSS direction property changes which :dir() selector matches.
• Prefer CSS logical properties such as margin-inline-start, padding-inline-end, and border-inline-start when they can replace separate direction-specific rules.
• Use the HTML lang attribute to identify language and the dir attribute to identify direction. They serve different purposes.
• Test multilingual layouts with both left-to-right and right-to-left content.

:dir() Example

This example displays two paragraphs with different text directions. The :dir() pseudo-class applies a blue border to left-to-right content and a green border to right-to-left content.

HTML

<div class="dir-demo">
  <p dir="ltr">Hello! This text reads left to right.</p>
  <p dir="rtl" lang="ar">مرحبا! هذا النص يقرأ من اليمين إلى اليسار.</p>
</div>

CSS

.dir-demo p {
  padding: 10px;
  margin: 0 0 10px;
  background-color: #f5f5f5;
}
.dir-demo p:dir(ltr) {
  border-left: 4px solid #0088cc;
  text-align: left;
}
.dir-demo p:dir(rtl) {
  border-right: 4px solid #27ae60;
  text-align: right;
}

Browser Result

The English paragraph has a blue border on the left. The Arabic paragraph has a green border on the right. Both are styled automatically according to their directionality.

Play in Editor

Browser Support

Baseline: Widely available. The :dir() pseudo-class has been supported across major browser engines since December 2023.

It works in current versions of Chrome, Edge, Firefox, Safari, and other modern browsers. Older browsers may not recognize the selector.

For current compatibility information, visit Can I Use? .

Specifications

The :dir() pseudo-class is defined in Selectors Level 4. HTML directionality behavior is defined in the HTML Living Standard.

Selectors Level 4 - The :dir() Pseudo-Class

HTML Living Standard - The dir Attribute