CSS Dir Pseudo-Class

Dir pseudo-class of CSS is implemented to match elements of HTML, depending on the direction of the content contained in them. Currently, ltr and rtl are normal values ​​- here ltr means left-to-right and rtl means right-to-left.

Syntax:
:dir(direction) {
/* declarations */
}

The main problem with using Dir Pseudo-Class is that very few browsers support it, and out of all the latest web browsers, only Firefox supports it. Therefore there is also a separate way which is supported by all browsers.

Syntax:
selector[dir=direction] {
/* declarations */
}

In the example below, HTML elements with ltr will have a blue color, and rtl elements will have a green color.

Example:
<style type="text/css">
article[dir=ltr] {
     color: blue;
}

article[dir=rtl] {
     color: green;
}
</style>

<article dir="ltr">
This text is inside an HTML article element that has an ltr directionality set using the dir attribute.
</article>

<article dir="rtl">
يستخدم Rtl بشكل شائع لصفحات الويب ذات النص العبري أو العربي.
</article> 

ltr is by default, and rtl is commonly used for web pages of text containing Hebrew or Arabic languages.


Scroll Back to Top