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

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

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

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

Селектор :dir() может принимать значения «ltr» или «rtl».

Псевдокласс :dir(ltr) соответствует элементам с направлением слева направо. Псевдокласс :dir(rtl) соответствует элементам с направлением справа налево. Другие значения недопустимы.

:dir(rtl) vs. `[dir=rtl]`

Между :dir(rtl) и [dir=rtl] есть разница. [dir=rtl] выбирает элемент только в том случае, если атрибут строго определён в HTML-разметке. :dir(rtl) выбирает элемент, даже если направление явно не указано в HTML. Элементы без явного направления наследуют атрибут dir от ближайшего предка, у которого он есть. В таких случаях [dir=rtl] не соответствует унаследованным элементам, тогда как :dir(rtl) — соответствует.

Версия

Selectors Level 4

Синтаксис

Синтаксис CSS :dir()

css

:dir(ltr) {
  css declarations
}

Пример использования селектора :dir():

Пример кода CSS :dir()

html

<!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>

Try it Yourself »

note
Этот псевдокласс поддерживается во всех современных браузерах, включая Chrome, Edge, Safari и Firefox.

Практика

Какова цель свойства 'dir' в CSS?

Позволяет пользователю указать направление текста.Изменяет цвет фона текста.Используется для выравнивания текста.Позволяет определить, должен ли текст отображаться справа налево или слева направо.

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

:dir(rtl) vs. [dir=rtl] ​

Версия ​

Синтаксис ​