CSS :dir() Pseudo Classe
La pseudo-classe :dir() di CSS seleziona elementi in base alla direzionalità del testo. Leggi la guida e prova gli esempi.
La pseudo-classe :dir() seleziona gli elementi in base alla direzionalità del testo che contengono — ovvero se il testo scorre da sinistra a destra (come l'italiano) o da destra a sinistra (come l'arabo o l'ebraico).
Questo è utile quando si costruisce un layout che deve adattarsi a entrambe le direzioni: invece di scrivere regole separate e alternare classi tramite JavaScript, si lascia che il browser stili ciascun elemento in base alla direzione del testo risolta.
La pseudo-classe :dir() non considera alcuno stato stilistico — legge la direzionalità che il documento stesso risolve per l'elemento. Questa direzione deriva dall'attributo HTML dir, che può essere impostato su ltr, rtl o auto, oppure viene ereditato da un antenato.
Il selettore accetta uno dei due valori seguenti:
:dir(ltr)seleziona gli elementi la cui direzionalità risolta è da sinistra a destra.:dir(rtl)seleziona gli elementi la cui direzionalità risolta è da destra a sinistra.
Qualsiasi altro valore non è valido e il selettore semplicemente non produrrà corrispondenze. Si noti che :dir(rtl) opera sulla direzione risolta, quindi un elemento impostato con dir="auto" il cui primo carattere forte è arabo sarà selezionato da :dir(rtl).
:dir(rtl) vs. [dir=rtl]
Potrebbe essere tentante usare il selettore di attributo [dir=rtl] al suo posto, ma i due si comportano in modo diverso:
[dir=rtl]corrisponde solo quando l'attributodirè scritto letteralmente su quell'elemento nel markup.:dir(rtl)corrisponde ogni volta che la direzionalità dell'elemento si risolve in da-destra-a-sinistra — anche sedirviene ereditato da un antenato o calcolato dadir="auto".
Gli elementi privi di un dir esplicito ereditano la direzionalità dal loro antenato più vicino che ne ha uno. In quel caso [dir=rtl] non seleziona il figlio che eredita (l'attributo non è su di lui), mentre :dir(rtl) sì. Preferire :dir() quando si vuole seguire la direzione effettiva piuttosto che il valore grezzo dell'attributo.
Il rovescio della medaglia è il supporto dei browser: :dir() è più recente, quindi quando si ha bisogno di un fallback per motori molto vecchi, il selettore di attributo è la scelta più sicura.
Versione
Sintassi
CSS :dir() sintassi
:dir(ltr) {
css declarations
}Esempio del selettore :dir():
CSS :dir() esempio di codice
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:dir(ltr) {
background-color: #1c87c9;
}
div:dir(rtl) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:dir() selector example</h2>
<div dir="rtl">
<span>example1</span>
<div dir="ltr">
example2
<div dir="auto"> ففي </div>
</div>
</div>
</body>
</html>Qui il <div dir="rtl"> esterno rende il suo blocco da destra a sinistra, quindi viene stilato in verde da div:dir(rtl). Il <div dir="ltr"> interno sovrascrive questo con da sinistra a destra e viene stilato in blu da div:dir(ltr). Il <div dir="auto"> più interno contiene testo arabo, quindi la sua direzione si risolve in da-destra-a-sinistra e anch'esso diventa verde — qualcosa che [dir=rtl] non avrebbe mai potuto catturare.
Ereditare la direzione senza ripetere l'attributo
Un utilizzo pratico di :dir() è lo styling di contenuti profondamente annidati dove solo un antenato porta l'attributo dir. Tutti i paragrafi sottostanti ereditano rtl, ma nessuno di essi lo dichiara esplicitamente:
<!DOCTYPE html>
<html>
<head>
<title>Inherited direction</title>
<style>
p:dir(rtl) {
border-inline-start: 4px solid #8ebf42;
padding-inline-start: 10px;
}
</style>
</head>
<body dir="rtl">
<article>
<p>مرحبا بالعالم</p>
<p>هذه فقرة أخرى</p>
</article>
</body>
</html>[dir=rtl] p funzionerebbe qui solo perché l'antenato viene selezionato prima, ma p[dir=rtl] non corrisponderebbe a nulla — i paragrafi non portano mai l'attributo. p:dir(rtl) li seleziona direttamente. Abbinandolo a proprietà logiche come border-inline-start il design rimane corretto in entrambe le direzioni automaticamente.
Questa pseudo-classe è supportata in tutti i browser moderni, inclusi Chrome, Edge, Safari e Firefox.
Concetti correlati
- Proprietà CSS
direction— imposta la direzione del testo direttamente in CSS. - Pseudo-classe CSS
:lang()— seleziona gli elementi per lingua, che spesso va di pari passo con la direzione. - Selettori CSS — l'elenco completo dei selettori che puoi combinare con
:dir().