:dir()

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

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

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

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

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

Синтаксис

:dir() требует одного параметра, представляющего желаемое направление.

Parameters

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

Formal syntax

:dir( ltr | rtl )

Пример

HTML

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

CSS

:dir(ltr) {
  background-color: yellow;
}

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

Result

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

Specification Status Comment
HTML Living Standard
Определение ':dir(ltr)' в этой спецификации.
Живой стандарт No changes.
Selectors Level 4
Определение ':dir()' в этой спецификации.
Рабочий черновик Initial definition.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:dir()
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 49
Полная поддержка 49
Нет поддержки 17 — 53
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 17 — 53
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

См. также

  • Языково-специфичные селекторы CSS: :lang, :dir