:dir()Псевдо-клас в CSS дозволяє елементи повинні бути обрані на основі напрямки мови, як визначено в HTML - розмітки. У документі насправді є лише два напрямки, якими може рухатися мова в документі, це зліва направо та справа наліво. Подумайте про це як про спосіб стилізації елементів, які відрізняються різною мовною спрямованістю.
.item:dir(rtl) ( background: red; color: #fff; )Псевдо-клас приймає лише одне значення і поверне нуль, якщо введено більше одного значення.
Дивіться псевдоселектор 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, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| Ні | 17 * | Ні | Ні | Ні |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ні | 85 | Ні | Ні |
Більше інформації
- Специфікація рівня 4 селекторів
- Випуск хрому # 576815
- Помилка WebKit # 64861
- Документація Mozilla
- Запит функції Microsoft Edge
- Статус платформи Chromium
- PostCSS
:dir()polyfill