CSS :dir() pseudo-class

The :dir() pseudo-class targets elements whose directionality are specified in the document. In other words, for the :dir() pseudo-class to work, we need to specify the directionality of the element in the markup with the dir HTML attribute.

There are two directions currently available and supported: ltr, which means “left to right”; and rtl which means “right to left”.

At the moment of writing this, only Firefox with a prefixed -moz-dir(): selector supports the :dir() pseudo-class. See screenshot at the bottom.

Note: Trying to combine the prefixed and unprefixed versions into a single rule, won’t work. We need to create two separate rules.

Example 1

The paragraph in the following article is in Arabic (which is written right to left), so the text will be color red:

التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.

Example 2

Now, the paragraph in the following article is in English (which is written left to right), so the text will be color blue:

If you already know some HTML and CSS and understand the principles of responsive web design, this book is for you.

Here's a screenshot of how the above paragraphs look in Firefox:

:dir() pseudo-class in Firefox