I Selettori di attributo in CSS

Gli elementi che usano un attributo specifico possono essere abbinati usando l'attributo selettore.

Go to the profile of  Jacopo Kahl
Jacopo Kahl
2 min di lettura
I Selettori di attributo in CSS

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.

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>```

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Unità di misura in CSS
4 min di lettura
I Colori in CSS
3 min di lettura
Specificità in CSS
3 min di lettura
I selettori CSS di relazione
3 min di lettura