CSS псевдокласс :dir()
Псевдокласс CSS :dir() выбирает элементы по направленности текста. Читайте о псевдоклассе и смотрите примеры.
Псевдокласс :dir() выбирает элементы на основе направленности содержащегося в них текста — то есть того, течёт ли текст слева направо (как в английском языке) или справа налево (как в арабском или иврите).
Это удобно при создании макета, который должен адаптироваться к обоим направлениям: вместо того чтобы писать отдельные правила и переключать классы из JavaScript, вы позволяете браузеру стилизовать каждый элемент в соответствии с его разрешённым направлением текста.
Псевдокласс :dir() не обращает внимания на стилистическое состояние элемента — он читает направленность, которую сам документ определяет для элемента. Это направление берётся из HTML-атрибута dir, который может быть установлен в ltr, rtl или auto, либо наследуется от предка.
Селектор принимает одно из двух значений:
:dir(ltr)выбирает элементы, у которых разрешённая направленность — слева направо.:dir(rtl)выбирает элементы, у которых разрешённая направленность — справа налево.
Любое другое значение является недопустимым, и селектор просто не будет ничего выбирать. Обратите внимание, что :dir(rtl) выбирает элементы на основе разрешённого направления, поэтому элемент с dir="auto", первый сильный символ которого является арабским, будет выбран :dir(rtl).
:dir(rtl) vs. [dir=rtl]
Может возникнуть соблазн использовать селектор атрибута [dir=rtl], однако они ведут себя по-разному:
[dir=rtl]выбирает элемент только тогда, когда атрибутdirбуквально прописан на этом элементе в разметке.:dir(rtl)выбирает элемент всякий раз, когда его направленность разрешается как справа налево — даже еслиdirунаследован от предка или вычислен изdir="auto".
Элементы без явного атрибута dir наследуют направленность от ближайшего предка, у которого он есть. В этом случае [dir=rtl] не выбирает наследующего потомка (атрибут на нём не установлен), тогда как :dir(rtl) выбирает. Предпочтительнее использовать :dir(), когда нужно следовать эффективному направлению, а не сырому атрибуту.
Обратная сторона — поддержка браузерами: :dir() является более новым, поэтому когда необходим запасной вариант для очень старых движков, селектор атрибута является более надёжным выбором.
Версия
Синтаксис
CSS :dir() syntax
:dir(ltr) {
css declarations
}Пример селектора :dir():
CSS :dir() code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:dir(ltr) {
background-color: #1c87c9;
}
div:dir(rtl) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:dir() selector example</h2>
<div dir="rtl">
<span>example1</span>
<div dir="ltr">
example2
<div dir="auto"> ففي </div>
</div>
</div>
</body>
</html>Здесь внешний <div dir="rtl"> задаёт своему блоку направление справа налево, поэтому он стилизуется зелёным цветом с помощью div:dir(rtl). Внутренний <div dir="ltr"> переопределяет это на направление слева направо и стилизуется синим цветом с помощью div:dir(ltr). Самый внутренний <div dir="auto"> содержит арабский текст, поэтому его направление разрешается как справа налево, и он тоже становится зелёным — чего [dir=rtl] никогда не смог бы поймать.
Наследование направления без повторения атрибута
Практическое применение :dir() — стилизация глубоко вложенного содержимого, где атрибут dir есть только у предка. Все абзацы ниже наследуют rtl, однако ни один из них не объявляет его явно:
<!DOCTYPE html>
<html>
<head>
<title>Inherited direction</title>
<style>
p:dir(rtl) {
border-inline-start: 4px solid #8ebf42;
padding-inline-start: 10px;
}
</style>
</head>
<body dir="rtl">
<article>
<p>مرحبا بالعالم</p>
<p>هذه فقرة أخرى</p>
</article>
</body>
</html>[dir=rtl] p сработал бы здесь только потому, что сначала выбирается предок, но p[dir=rtl] не выбрал бы ничего — абзацы не имеют этого атрибута. p:dir(rtl) выбирает их напрямую. Сочетание его с логическими свойствами, такими как border-inline-start, автоматически обеспечивает корректность дизайна в обоих направлениях.
Этот псевдокласс поддерживается во всех современных браузерах, включая Chrome, Edge, Safari и Firefox.
Связанные понятия
- CSS-свойство
direction— установка направления текста непосредственно в CSS. - CSS псевдокласс
:lang()— выбор элементов по языку, что часто идёт рука об руку с направленностью. - CSS-селекторы — полный список селекторов, которые можно комбинировать с
:dir().