CSS селектор :dir() — вибір за напрямком письма (rtl, ltr)

CSS псевдоклас :dir() вибирає елементи за напрямком письма: ltr (зліва направо) або rtl (справа наліво).

правити

Загальний опис

Відрізняється від селектора за атрибутом [dir="rtl"] тим, що враховує успадкований напрямок. Елемент може не мати атрибута зовсім, але лежати всередині rtl-блоку — і :dir(rtl) його знайде.

правити

+ додати пораду чи нотатку

Синтаксис

:dir(ltr | rtl)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
dir	120+	49+	16.4+	106+	120+	-

Підтримка: мобільні переглядачі

Переглядач
dir	120+	yes	yes	16.4+

Приклади

+ запропонувати свій приклад у пісочниці

<div dir="rtl">
    <p>هذا نص عربي</p>
</div>

p:dir(rtl) {
    padding-right: 1rem;
    border-right: 3px solid #0172ad;
}

p:dir(ltr) {
    padding-left: 1rem;
    border-left: 3px solid #0172ad;
}