La pseudo-classe :dir() consente di selezionare gli elementi in base alla direzione della lingua, così come impostato sul markup HTML. Ci sono solamente due direzioni in cui la lingua può essere impostata in un documento, ovvero da sinistra a destra e da destra a sinistra.
Questo selettore consente di applicare un determinato stile agli elementi in base alla direzione in cui è orientata la lingua.
<div class="elemento">
Testo contenuto all'interno dell'elemento.
</div>
<div class="elemento" dir="rtl">
Anche questo testo è contenuto all'interno dell'elemento, ma sarà orientato nella direzione opposta.
</div>.elemento:dir(rtl) {
background: black;
color: white;
}Questa pseudo-classe accetta come parametro solamente un singolo valore e non funzionerà correttamente se più di un valore viene inserito.
Esempio
Di seguito ecco un esempio di uno stile applicato in base alla direzione del testo. Attenzione, attualmente l’esempio funzionerà solamente sul browser Firefox.
Differenza tra :dir(rtl) e [dir=rtl]
Possiamo anche selezionare un elemento in base alla direzione della lingua utilizzando un selettore per attributo:
.elemento[dir=rtl] {
background: black;
color: white;
}La differenza principale è che mentre [dir=rtl] seleziona gli elementi solamente in base a quello che è stabilito nella sintassi HTML, la controparte :dir(rtl) sarà in grado di rilevare anche le impostazioni della lingua attraverso lo user agent dell’utente che visita il sito. Questo consentirà al selettore di agire anche su elementi la cui direzione non è deliberatamente specificata nell’HTML.
Questo ci risolve un grosso problema, dato che gli elementi in cui non è esplicitamente indicata la direzione della lingua, erediteranno l’ attributo dir dell’antenato più vicino che ne contiene uno. Ciò può portare a uno scenario in cui l’utilizzo [dir=rtl] seleziona altri elementi non desiderati.
Supporto dei Browser
Attualmente solo Firefox e Firefox su Android supportano questo selettore.
[caniuse feature=”css-dir-pseudo”]