CSS :dir Selector
Last Updated :
22 Aug, 2022
Improve
:dir is used to select and change the properties of the text element having direction left to right or right to left.
Syntax:
:dir(ltr|rtl)
Parameters: It accepts the following two parameters.
- ltr: This keyword basically looks for elements having direction from left to right.
- rtl: This keyword basically looks for elements having direction from right to left.
Note: Please run the code in Firefox browser.
Example:
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{ color:#fff; width: 300px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; padding-top: 5px; } :dir(rtl) { background-color: black; } :dir(ltr) { background-color: green; }</style><body> <div dir="rtl"> Geeks for geeks </div> <div dir="ltr"> Geeks for geeks <div dir="rtl">???? ?? ??? ????</div> </div></body></html> |
Output:
Example 2:
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{ color:#fff; width: 300px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; padding-top: 5px; } h1{ color: #000; } :dir(rtl) { background-color: green; }</style><body> <h1>dir="auto"</h1> <div dir="auto">???? ?? ??? ????</div></body></html> |
Output:
Supported Browsers:
- Firefox 49.0
