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 a 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.

Browser support

x x x 49.0+
17.0 - 48.0 -moz-
x x

Practice Your Knowledge

Which statement below is incorrect?




Related articles