CSS псевдокласс :dir()

Псевдокласс :dir() выбирает элементы, направленность текста в которых определена в документе.

Псевдокласс :dir() не выбирает элемент на основе стилевых положениях, и поэтому в документе необходимо указать направленность элемента.

В HTML5 направленность элемента может быть указана с помощью атрибута dir.

Селектор :dir() имеет значение "rtl" или "ltr".

Версия

CSS4

Синтаксис

:dir() {
css declarations
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div:dir(ltr) {
      background-color: #1c87c9;
      }
      div:dir(rtl) {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :dir()</h2>
    <div dir="rtl">
      <span>example1</span>
      <div dir="ltr">
        example2
        <div dir="auto"> ففي </div>
      </div>
    </div>
  </body>
</html>