:dir()

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The :dir() pseudo-class in CSS allows elements to be selected based on the direction of the language, as determined in the HTML markup. There are really only two directions language can flow in a document, which are left-to-right and right-to-left. Think of this as a way to style elements that are distinguished by different language directionality.

<div class="item">
	<!-- Content -->
</div>
<div class="item" dir="rtl">
	<!-- Content -->
</div>
.item:dir(rtl) {
  background: red;
  color: #fff;
}

The pseudo-class only accepts a single value and will return null if more than one value is entered.

See the Pen :dir pseudo-selector by Geoff Graham (@geoffgraham) on CodePen.

:dir(rtl) vs. [dir=rtl]

We can also select an element based on its language direction by making using a match query selector:

.item[dir=rtl] {
  background: red;
  color: #fff;
}

That does indeed work, but is different from :dir(rtl) in that it only selects an element by what is strictly defined in the HTML markup. On the flip-side, :dir(rtl) will sniff out the user agent’s language preferences and select the element without being explicitly stated in the HTML.

This is a big deal because elements that do not explicitly state the language direction will inherit the dir attribute of its closest ancestor that contains one. That can lead to a scenario where using [dir=rtl] selects additional elements than you intend.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
12017*No12016.4

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312216.4

More Information