: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