:dir() CSS Pseudo Class

Description

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;

}

Syntax

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

Values

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

Example

<div dir="rtl">

  <span>test1</span>

  <div dir="ltr">

    test2

    <div dir="auto">עִבְרִית</div>

  </div>

</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.

Desktop
x	x	49	x	16.4

Tablets / Mobile
x	49	x	16.4	x	x

Last updated by CSSPortal on: 1st October 2023