:dir()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

Error: could not find syntax for this item

Пример

HTML

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

CSS

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

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

Result

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

Specification
HTML Standard
# selector-ltr
Selectors Level 4
# the-dir-pseudo

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

BCD tables only load in the browser

Смотрите также

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