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.

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:

<!DOCTYPE html>
<html>

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

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

</html>

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