Open In App

CSS :dir Selector

Last Updated : 22 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

: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

T

tarun007
Improve
Article Tags :

Explore

Lightbox