:dir()

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.

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
No
firefox
Mozilla Firefox
49
ie
Internet Explorer
No
edge
Microsoft Edge
No
opera
Opera
No
safari
Apple Safari
No

Mobile / Tablet

and_chr
Android Chrome
No
and_ff
Android Firefox
101
android
Android
No
samsung
Samsung Internet
No
op_mob
Opera Mobile
No
ios_saf
iOS Safari
No

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.