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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с декабря 2023 года.

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

/* Selects any element with right-to-left text */
:dir(rtl) {
  background-color: red;
}

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

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

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

Синтаксис

:dir([ltr | rtl]) {
  /* ... */
}

Параметры

Псевдокласс :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;
}

Результат

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

Спецификация
HTML # selector-ltr
HTML # selector-rtl
Selectors Level 4 # dir-pseudo

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`dir`	120	120	49 17–53	106	16.4	120	49 17–53	80	16.4	25.0	120	16.4

См. также

Псевдоклассы, связанные с языком: :lang()
Атрибут HTML lang
Атрибут HTML translate

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:dir