: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
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 |