Newly availableUseful when :dir() adds a clear capability without requiring fragile workarounds.
Selectors Newly available

:dir()

The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).

Selectors

Overview

The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:dir
120
120
49
16.4
120
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (53)
Compatibility
  • Available with a vendor prefix: -moz- (17)

Syntax

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

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

.nav-icon:dir(rtl) {
  transform: scaleX(-1);
}

Live demo

LTR Textplacement

:dir() pseudo-class LTR textplacement demo.

PreviewFullscreen

RTL Textplacement

:dir() pseudo-class RTL textplacement demo.

PreviewFullscreen

direction by padding

:dir() pseudo-class direction by padding demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use :dir() to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links

Powered by web-features