I selettori di attributo consentono di individuare gli elementi all'interno di una pagina HTML e di aggiungere loro lo stile in base ai loro attributi.
Indice
- I Selettori di attributo
- Valori dei selettori di attributo
- Selettori di attributo per la lingua
- Selettori di attributo delimitati da spazi
- Selettore valore sottostringa
- Selettori di attributo che iniziano con un determinato valore
- Selettori di attributo che terminano con un determinato valore
I Selettori di attributo
Gli elementi che usano un attributo specifico possono essere abbinati usando l'attributo selettore. Questo selettore non tiene conto del valore dell'attributo.
input[type] {}
Questo selettore corrisponderà solo agli elementi di input che utilizzano il tipo
attributo, come il seguente elemento:
<input type="text">
Valori dei selettori di attributo
È possibile abbinare sia l'attributo che il valore utilizzando il selettore del valore dell'attributo.
input[type="submit"] {}
Gli elementi che hanno il tipo di attributo impostato su submit verranno associati a questa regola, come nell'esempio seguente:
<input type="submit">
Selettori di attributo per la lingua
Il selettore dell'attributo della lingua viene utilizzato per abbinare l'attributo lang.
p[lang|="it"] {}
Questo selettore corrisponderà a tutti gli elementi il cui valore dell'attributo lang
inizia con "it"'. I codici di lingua come questi non fanno distinzione tra maiuscole e minuscole.
<p lang="it">Italiano</p>
<p lang="en">English</p>
Selettori di attributo delimitati da spazi
Il selettore [attribute~=value] si applica agli elementi il cui attributo value contiene la parola data in un elenco di parole separate da spazi.
input[value~="parola"] {}
Questa regola selezionerà entrambi i seguenti elementi. La parola ha bisogno
di una corrispondenza esatta tra maiuscole e minuscole, quindi il selettore non si applica a "Parola" o "Parole".
<input type="text" value="parola">
<input type="text" value="parola parole">
Selettore valore sottostringa
Il selettore [attribute*=value] corrisponde agli elementi il cui valore di attributo
contiene la sottostringa specificata.
p[title*="paro"] {}
Gli elementi di paragrafo con un titolo contenente "paro" saranno abbinati a
questa regola.
<p title="paroliere"></p>
Selettori di attributo che iniziano con un determinato valore
Il selettore [attribute^=value] corrisponde a ogni elemento il cui attributo valore inizia con la stringa specificata.
p[title^="primo"] {}
I paragrafi con un valore del titolo che iniziano con "primo" avranno questa regola
applicato.
<p title="primo paragrafo"></p>
Selettori di attributo che terminano con un determinato valore
Il selettore [attribute$=value] corrisponde a un elemento se il suo valore di attributo termina con la stringa specificata.
p[title$="finale"] {}
Nell'esempio che segue il valore dell'attributo title termina con "finale" e sarà quindi abbinato a questa regola.
<p title="paragrafo finale"></p>```
