:dir()
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Please help us by answering a few questions.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
: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
Error: could not find syntax for this item
Пример
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 # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |