:dir()Псевдо-класс в CSS позволяет элементы должны быть выбраны на основе направления языка, как определено в HTML - разметки. На самом деле в документе может быть только два направления языка: слева направо и справа налево. Подумайте об этом как о способе стилизации элементов, которые отличаются различной языковой направленностью.
.item:dir(rtl) ( background: red; color: #fff; )Псевдокласс принимает только одно значение и вернет null, если введено более одного значения.
См. Псевдоселектор Pen: dir Джеффа Грэма (@geoffgraham) на CodePen.
:dir(rtl) против. (dir=rtl)
Мы также можем выбрать элемент на основе его языкового направления, используя селектор запросов на совпадение:
.item(dir=rtl) ( background: red; color: #fff; )Это действительно работает, но отличается от :dir(rtl)этого тем, что выбирает элемент только по тому, что строго определено в разметке HTML. С другой стороны, :dir(rtl)будет вынюхивать языковые предпочтения пользовательского агента и выбирать элемент без явного указания в HTML.
Это большое дело, потому что элементы, которые явно не указывают направление языка, унаследуют dirатрибут своего ближайшего предка, который его содержит. Это может привести к сценарию, в котором при использовании (dir=rtl)выбираются дополнительные элементы, чем вы предполагаете.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| Нет | 17 * | Нет | Нет | Нет |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Нет | 85 | Нет | Нет |
Дополнительная информация
- Селекторы Уровня 4 Спецификация
- Выпуск Chromium # 576815
- Ошибка WebKit # 64861.
- Документация Mozilla
- Запрос функции Microsoft Edge
- Статус платформы Chromium
:dir()Полифил PostCSS