Elementi HTML di stile con attributi specifici

È possibile dare uno stile agli elementi HTML che hanno attributi o valori di attributo specifici.

Selettore [attributo] CSS

Il selettore [attributo] viene utilizzato per selezionare elementi con un attributo specificato.

L'esempio seguente seleziona tutti gli elementi <a> con un attributo target:

a[target] {
  background-color: yellow;
}

Visualizza esempio

Selettore CSS [attributo="valore"]

Il selettore [attribute="value"] viene utilizzato per selezionare elementi con un attributo e un valore specificati.

L'esempio seguente seleziona tutti gli elementi <a> con un attributo target="_blank":

a[target="_blank"] {
  background-color: yellow;
}

Visualizza esempio

Selettore CSS [attributo~="valore"]

Il selettore [attribute~="value"] viene utilizzato per selezionare elementi con un valore di attributo contenente una parola specificata.

L'esempio seguente seleziona tutti gli elementi con un attributo title che contiene un elenco di parole separate da spazi, uno dei quali è "fiore":

[title~="flower"] {
  border: 5px solid yellow;
}

Visualizza esempio

Selettore CSS [attributo|="valore"]

Il selettore [attribute|="value"] viene utilizzato per selezionare elementi con l'attributo specificato, il cui valore può essere esattamente il valore specificato o il valore specificato seguito da un trattino (-).

[class|="top"] {
  background: yellow;
}

Visualizza esempio

Selettore CSS [attributo^="valore"]

Il selettore [attribute^="value"] viene utilizzato per selezionare gli elementi con l'attributo specificato, il cui valore inizia con il valore specificato.

L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top":

[class^="top"] {
  background: yellow;
}

Visualizza esempio

Selettore CSS [attributo$="valore"]

Il selettore [attribute$="value"] viene utilizzato per selezionare elementi il cui valore di attributo termina con un valore specificato.

L'esempio seguente seleziona tutti gli elementi con un valore di attributo class che termina con "test":

[class$="test"] {
  background: yellow;
}

Visualizza esempio

Selettore CSS [attributo*="valore"]

Il selettore [attribute*="value"] viene utilizzato per selezionare elementi il cui valore di attributo contiene un valore specificato.

L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che contiene "te":

[class*="te"] {
  background: yellow;
}

Visualizza esempio

Stile dei moduli

I selettori di attributo possono essere utili per stilizzare moduli senza classe o ID:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Visualizza esempio