: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, который выбирает элементы на основе направления текста в них.
/* Выбирает все элементы с текстом справа-налево */
:dir(rtl) {
background-color: red;
}
:dir()
учитывает только семантическое направление, т.е. заданное в самом документе. Он не учитывает стилизованное направление, т.е. заданное CSS-правилами, например direction
.
Примечание: Помните о том, что псевдокласс :dir()
не эквивалентен выбору по атрибуту [dir=…]
. Последний применяется только к тем элементам HTML, у которых есть атрибут dir
, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом [dir=rtl]
и [dir=ltr]
не будут включать auto
.) :dir()
, же, напротив, соответствует значению вычисленному user agent, даже унаследованному.
Примечание: В HTML, направление задаётся атрибутом dir
. В других форматах могут использоваться иные методы.
Синтаксис
:dir()
требует одного параметра, представляющего желаемое направление.
Parameters
Formal syntax
Пример
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 |
---|
HTML Standard # selector-ltr |
Selectors Level 4 # the-dir-pseudo |
Совместимость с браузерами
BCD tables only load in the browser