La :dir()pseudo-classe in CSS consente di selezionare gli elementi in base alla direzione del linguaggio, come determinato nel markup HTML. Ci sono davvero solo due direzioni in cui la lingua può fluire in un documento, che sono da sinistra a destra e da destra a sinistra. Pensa a questo come a un modo per definire elementi che si distinguono per la diversa direzionalità del linguaggio.
.item:dir(rtl) ( background: red; color: #fff; )La pseudo-classe accetta solo un singolo valore e restituirà null se viene immesso più di un valore.
Vedi lo pseudo-selettore Pen: dir di Geoff Graham (@geoffgraham) su CodePen.
:dir(rtl) vs. (dir=rtl)
Possiamo anche selezionare un elemento in base alla sua lingua utilizzando un selettore di query di corrispondenza:
.item(dir=rtl) ( background: red; color: #fff; )Questo funziona davvero, ma è diverso dal fatto :dir(rtl)che seleziona un elemento solo in base a ciò che è strettamente definito nel markup HTML. Il rovescio della medaglia, :dir(rtl)fiuterà le preferenze di lingua del programma utente e selezionerà l'elemento senza essere esplicitamente dichiarato nell'HTML.
Questo è un grosso problema perché gli elementi che non dichiarano esplicitamente la direzione della lingua erediteranno l' dirattributo del suo antenato più vicino che ne contiene uno. Ciò può portare a uno scenario in cui l'utilizzo (dir=rtl)seleziona elementi aggiuntivi di quelli che intendi.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| No | 17 * | No | No | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| No | 85 | No | No |
Maggiori informazioni
- Selettori Livello 4 Specifica
- Chromium Issue # 576815
- Bug WebKit # 64861
- Documentazione Mozilla
- Richiesta di funzionalità Microsoft Edge
- Stato della piattaforma Chromium
- PostCSS
:dir()polyfill