:dir() CSS Pseudo Class


The :dir() pseudo-class in CSS is a selector that allows you to target elements based on the text directionality of their content. It is particularly useful for styling elements in languages that are written from right to left (e.g., Arabic, Hebrew) or left to right (e.g., English, Spanish).

The :dir() pseudo-class takes one of two values: ltr (left-to-right) or rtl (right-to-left). You can use it in your CSS to apply specific styles to elements depending on the direction of their content. For example, you can use :dir(rtl) to style elements that contain right-to-left text, ensuring that their alignment, margins, padding, or other properties are adjusted accordingly.

Here's a simple example of how you might use :dir() in CSS:

/* Style for elements with left-to-right text */
:dir(ltr) {
text-align: left;

/* Style for elements with right-to-left text */
:dir(rtl) {
text-align: right;

This allows you to create more adaptable and language-aware stylesheets that cater to different text directions in a web page.


:dir([ltr | rtl]) {
  /* ... */


  • ltrTarget left-to-right elements.
  • rtlTarget right-to-left elements.


<div dir="rtl">
<div dir="ltr">
<div dir="auto">עִבְרִית</div>
:dir(ltr) {
background-color: yellow;

:dir(rtl) {
background-color: powderblue;

Browser Support

The following table will show you the current browser support for the CSS :dir() pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023