:dir()

Базовая версия 2023

Новое

С декабря 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() требует одного параметра, представляющего направленность текста, на который вы хотите нацелиться.

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

Параметры

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
Селекторы уровень 4 # the-dir-pseudo

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:dir`	120	120	4917–53	106	16.4	120	4917–53	80	16.4	25.0	120

См. также

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

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