:dir
Matches elements based on text direction (ltr or rtl). Useful for bi-directional text layouts.
Quick example
p:dir(ltr) { text-align: left; }
p:dir(rtl) { text-align: right; }Examples
Style based on text direction (LTR vs RTL)
p:dir(ltr) { margin-left: 1rem; }
p:dir(rtl) { margin-right: 1rem; }Use :dir() to apply direction-aware margins without checking the dir attribute in CSS.
Conditional alignment based on language
.quote:dir(ltr) { border-left: 4px solid blue; }
.quote:dir(rtl) { border-right: 4px solid blue; }Place decorative borders on the correct side based on text direction.
Simplify RTL sites without dir attribute on every element
html[dir="rtl"] button:dir(rtl) {
padding-left: 0.5rem;
padding-right: 1rem;
}:dir() checks actual directionality, so you don't need dir attributes on every element.
:dir Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
Common pitfalls
:dir() depends on the dir attribute on an ancestor. If your HTML doesn't have dir="ltr" or dir="rtl" set, :dir() won't match correctly.
:dir() checks text direction; :lang() checks language. Arabic is RTL, but setting only lang="ar" without dir="rtl" won't match :dir(rtl).