Su PixelHub trovi corsi, articoli e script per lo sviluppo Web, il Web Marketing e il Social Media Marketing.

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

  1. I Selettori di attributo
  2. Valori dei selettori di attributo
  3. Selettori di attributo per la lingua
  4. Selettori di attributo delimitati da spazi
  5. Selettore valore sottostringa
  6. Selettori di attributo che iniziano con un determinato valore
  7. 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>```
Ti sei iscritto con successo a PixelHub | Creativi Digitali 💻
Bentornatə! Hai effettuato correttamente l'accesso.
Ottimo! Iscrizione effettuata con successo.
Il link è scaduto
Ottimo! Controlla la tua email per il link di accesso.