Dir pseudo-class of CSS is implemented to match HTML elements, 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.


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


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.


<!DOCTYPE html>

            article[dir=ltr] {
                color: blue;
            article[dir=rtl] {
                color: green;

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