Selettori di attributi CSS
Stile elementi HTML con attributi specifici
È possibile applicare uno stile agli elementi HTML che hanno attributi o valori di attributo specifici.
Selettore CSS [attributo].
Il [attribute]selettore viene utilizzato per selezionare elementi con un attributo specificato.
L'esempio seguente seleziona tutti gli elementi <a> con un attributo target:
Esempio
a[target] {
background-color: yellow;
}
Selettore CSS [attributo="valore"].
Il [attribute="value"]selettore 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":
Esempio
a[target="_blank"] {
background-color: yellow;
}
Selettore CSS [attributo~="valore"].
Il [attribute~="value"]selettore 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, una delle quali è "fiore":
Esempio
[title~="flower"] {
border: 5px solid yellow;
}
L'esempio sopra abbinerà gli elementi con title="flower", title="summer flower" e title="flower new", ma non title="my-flower" o title="flowers".
Selettore CSS [attributo|="valore"].
Il [attribute|="value"]selettore viene utilizzato per selezionare gli elementi con l'attributo specificato, il cui valore può essere esattamente il valore specificato o il valore specificato seguito da un trattino (-).
Nota: il valore deve essere una parola intera, da sola, come class="top", o seguita da un trattino( - ), come class="top-text".
Esempio
[class|="top"] {
background: yellow;
}
Selettore CSS [attributo^="valore"].
Il [attribute^="value"]selettore 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":
Nota: il valore non deve essere una parola intera!
Esempio
[class^="top"] {
background: yellow;
}
Selettore CSS [attributo$="valore"].
Il [attribute$="value"]selettore viene utilizzato per selezionare gli elementi il cui valore di attributo termina con un valore specificato.
L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che termina con "test":
Nota: il valore non deve essere una parola intera!
Esempio
[class$="test"] {
background: yellow;
}
Selettore CSS [attributo*="valore"].
Il [attribute*="value"]selettore viene utilizzato per selezionare gli 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":
Nota: il valore non deve essere una parola intera!
Esempio
[class*="te"] {
background: yellow;
}
Forme di stile
I selettori di attributi possono essere utili per lo stile di moduli senza classe o ID:
Esempio
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Suggerimento: visita il nostro tutorial sui moduli CSS per ulteriori esempi su come applicare uno stile ai moduli con i CSS.
Tutti i selettori di attributi CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |