:dir()Pseudo-class CSS umožňuje prvky, které budou vybrány na základě směru jazyka, jak je stanoveno v HTML značky. Ve skutečnosti mohou v dokumentu proudit pouze dva směry, které jsou zleva doprava a zprava doleva. Přemýšlejte o tom jako o způsobu stylizace prvků, které se vyznačují odlišnou jazykovou směrovostí.
.item:dir(rtl) ( background: red; color: #fff; )Pseudotřída přijímá pouze jednu hodnotu a vrátí null, pokud je zadána více než jedna hodnota.
Podívejte se na Pen: dir pseudo-selektor Geoffa Grahama (@geoffgraham) na CodePen.
:dir(rtl) vs. (dir=rtl)
Můžeme také vybrat prvek na základě jeho jazykového směru pomocí selektoru vyhledávacího dotazu:
.item(dir=rtl) ( background: red; color: #fff; )To skutečně funguje, ale liší se od :dir(rtl)toho, že vybírá pouze prvek podle toho, co je přísně definováno ve značce HTML. Na druhé straně :dir(rtl)bude čichat jazykové předvolby agenta uživatele a vybere prvek, aniž by byl výslovně uveden v HTML.
To je velký problém, protože prvky, které výslovně neuvádějí směr jazyka, zdědí diratribut svého nejbližšího předka, který obsahuje jeden. To může vést ke scénáři, kdy použití (dir=rtl)vybere další prvky, než zamýšlíte.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| Ne | 17 * | Ne | Ne | Ne |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ne | 85 | Ne | Ne |
Více informací
- Specifikace úrovně 4 selektorů
- Číslo chromu # 576815
- Chyba WebKit # 64861
- Dokumentace Mozilla
- Požadavek na funkci Microsoft Edge
- Stav platformy Chromium
- Polyfill
:dir()PostCSS