Перейти к содержанию

:dir()

:dir() — это псевдо-класс CSS, который выбирает элементы на основе направления текста в них.

:dir() учитывает только семантическое направление, т. е. заданное в самом документе. Он не учитывает стилизованное направление, т. е. заданное CSS-правилами, например direction.

Примечание

Примечание: помните о том, что псевдокласс :dir() не эквивалентен выбору по атрибуту [dir=…]. Последний применяется только к тем элементам HTML, у которых есть атрибут dir, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом [dir=rtl] и [dir=ltr] не будут включать auto.) :dir() же, напротив, соостветсвует значению вычисленному user agent, даже унаследованному.

Примечание: В HTML, направление задается атрибутом dir. В других форматах могут использоваться иные методы.

Псевдоклассы

Синтаксис

1
2
3
4
/* Выбирает все элементы с текстом справа-налево */
:dir(rtl) {
    background-color: red;
}

Параметры

ltr

Выбирает элементы с направлением текста слева-направо.

rtl

Выбирает элементы с направлением текста справа-налево.

Спецификации

Пример

1
2
3
4
5
6
7
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
1
2
3
4
5
6
7
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

См. также

Ссылки

  • Псевдо-класс :dir() MDN (рус.)

Комментарии