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

:dir()

The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.

css

/* Selects any element with right-to-left text */ :dir(rtl) { background-color: red; }

The :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself. It doesn't account for styling directionality, i.e., the directionality set by CSS properties such as direction.

Selectors

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