CSS :dir() Pseudo Class

The :dir() pseudo-class matches elements that are based on the directionality of the text contained in them.

The :dir() does not select based on stylistic states that is why the directionality of an element needs to be specified in the document.

In an HTML5, the directionality of an element can be specified using the dir attribute.

The :dir() selector takes either "rtl" or "ltr" values.

Version

CSS4

Syntax

:dir() {
css declarations
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div:dir(ltr) {
      background-color: #1c87c9;
      }
      div:dir(rtl) {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:dir() selector example</h2>
    <div dir="rtl">
      <span>example1</span>
      <div dir="ltr">
        example2
        <div dir="auto"> ففي </div>
      </div>
    </div>
  </body>
</html>

In order to see the effect use Firefox because this pseudo-class works only on Mozzila Firefox.




Related articles