:dir()Pseudo-class CSS umožňuje prvky, ktoré budú vybrané na základe smeru jazyka, ako je stanovené v HTML značky. V dokumente môžu skutočne plynúť iba dva smery, ktoré sú zľava doprava a sprava doľava. Predstavte si to ako spôsob štýlu prvkov, ktoré sa vyznačujú odlišnou jazykovou smerovosťou.
.item:dir(rtl) ( background: red; color: #fff; )Pseudotrieda akceptuje iba jednu hodnotu a vráti null, ak je zadaných viac ako jedna hodnota.
Prezrite si pseudo-selektor Pen: dir od Geoffa Grahama (@geoffgraham) na CodePen.
:dir(rtl) vs. (dir=rtl)
Element môžeme zvoliť aj na základe jeho jazykového smeru pomocou selektora zhody:
.item(dir=rtl) ( background: red; color: #fff; )To síce funguje, ale líši sa od :dir(rtl)toho, že vyberá iba prvok podľa toho, čo je striktne definované v značke HTML. Na druhej strane :dir(rtl)vyňuchá jazykové predvoľby agenta používateľa a vyberie prvok bez výslovného uvedenia v kóde HTML.
Je to veľká vec, pretože prvky, ktoré výslovne neuvádzajú smerovanie jazyka, zdedia diratribút najbližšieho predka, ktorý ho obsahuje. To môže viesť k scenáru, keď použitie (dir=rtl)vyberie ďalšie prvky, ako ste zamýšľali.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| Nie | 17 * | Nie | Nie | Nie |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nie | 85 | Nie | Nie |
Viac informácií
- Špecifikácia selektorov úrovne 4
- Chrómové vydanie # 576815
- Chyba WebKit # 64861
- Dokumentácia Mozilla
- Žiadosť o funkciu Microsoft Edge
- Stav platformy Chromium
- PostCSS
:dir()polyfill