Pseudo-classe CSS :dir()
La pseudo-classe CSS :dir() seleziona gli elementi in base alla direzione del testo. Scopri la pseudo-classe e prova gli esempi.
La pseudo-classe :dir() seleziona gli elementi in base alla direzione del testo che contengono.
La pseudo-classe :dir() non seleziona in base a stati stilistici: per questo la direzione di un elemento deve essere specificata nel documento.
In HTML5, la direzione di un elemento può essere specificata usando l'attributo dir.
Il selettore :dir() può avere i valori "ltr" o "rtl".
La pseudo-classe :dir(ltr) seleziona gli elementi che hanno una direzione da sinistra a destra. La pseudo-classe :dir(rtl) seleziona gli elementi che hanno una direzione da destra a sinistra. Gli altri valori non sono validi.
:dir(rtl) vs. [dir=rtl]
C'è una differenza tra :dir(rtl) e [dir=rtl]. [dir=rtl] seleziona un elemento solo se l'attributo è definito esplicitamente nel markup HTML. :dir(rtl) seleziona l'elemento anche se la direzione non è dichiarata esplicitamente nell'HTML. Gli elementi senza una direzione esplicita ereditano l'attributo dir dall'antenato più vicino che lo contiene. In questi casi, [dir=rtl] non seleziona gli elementi ereditati, mentre :dir(rtl) sì.
Versione
Sintassi
Sintassi CSS :dir()
:dir(ltr) {
css declarations
}Esempio del selettore :dir():
Esempio di codice CSS :dir()
<!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>Questa pseudo-classe è supportata da tutti i browser moderni, tra cui Chrome, Edge, Safari e Firefox.