: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
Limited availability 65% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Common pitfalls
:dir() requires HTML dir attribute
: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.
Different from :lang()
:dir() checks text direction; :lang() checks language. Arabic is RTL, but setting only lang="ar" without dir="rtl" won't match :dir(rtl).