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.
