:dir()Pseudo-clasa în CSS permite elementelor să fie selectate în funcție de direcția limbii, așa cum este determinat în elementele de limbaj HTML. Există într-adevăr doar două direcții pe care limbajul le poate curge într-un document, care sunt de la stânga la dreapta și de la dreapta la stânga. Gândiți-vă la aceasta ca la o modalitate de stilizare a elementelor care se disting prin direcționalitate diferită a limbajului.
.item:dir(rtl) ( background: red; color: #fff; )Pseudo-clasa acceptă doar o singură valoare și va returna nul dacă se introduce mai mult de o valoare.
Vezi pseudo-selectorul Pen: dir de Geoff Graham (@geoffgraham) pe CodePen.
:dir(rtl) vs. (dir=rtl)
De asemenea, putem selecta un element pe baza direcției sale de limbă, utilizând un selector de interogare de potrivire:
.item(dir=rtl) ( background: red; color: #fff; )Acest lucru funcționează într-adevăr, dar este diferit de :dir(rtl)faptul că selectează doar un element prin ceea ce este strict definit în marcajul HTML. În partea opusă, :dir(rtl)va adulmeca preferințele de limbă ale agentului utilizator și va selecta elementul fără a fi menționat în mod explicit în HTML.
Aceasta este o mare problemă, deoarece elementele care nu afirmă în mod explicit direcția limbajului vor moșteni diratributul strămoșului său cel mai apropiat care conține unul. Acest lucru poate duce la un scenariu în care utilizarea (dir=rtl)selectează elemente suplimentare decât intenționați.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| Nu | 17 * | Nu | Nu | Nu |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| Nu | 85 | Nu | Nu |
Mai multe informatii
- Selector de nivel 4 Specificație
- Chromium Issue # 576815
- Bug WebKit # 64861
- Documentație Mozilla
- Solicitare caracteristică Microsoft Edge
- Starea platformei Chromium
- Poliacumplere
:dir()PostCSS