CSS :dir Selector

: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

Explore