CSS Dir Pseudo-Class

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.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram