В :dir()псевдо-класа в CSS позволява елементи, за да бъдат избрани въз основа на посоката на езика, както е определено в HTML маркирането. Наистина има само две посоки, които езикът може да протича в документ, които са отляво надясно и отдясно наляво. Мислете за това като за начин за стилизиране на елементи, които се отличават с различна езикова насоченост.
.item:dir(rtl) ( background: red; color: #fff; )Псевдокласът приема само една стойност и ще върне null, ако е въведена повече от една стойност.
Вижте псевдоселектора Pen: dir от Geoff Graham (@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