6.1 Tipi di selettori di attributi
I selettori di attributi in CSS permettono di selezionare elementi basandosi sulla presenza di attributi, sui loro valori o su parti dei valori degli attributi. Offrono capacità flessibili e potenti per stilizzare elementi HTML, rendendoli particolarmente utili per lavorare con contenuti dinamici e pagine web interattive.
Tipi di selettori di attributi
- Selettore di attributo (Attribute Selector)
- Selettore di attributo con valore (Attribute Selector with Value)
- Selettore di attributo con prefisso (Attribute Selector with Prefix)
- Selettore di attributo con suffisso (Attribute Selector with Suffix)
- Selettore di attributo contenente sottostringa (Attribute Selector with Substring)
- Selettore di attributo con divisione per spazio (Attribute Selector with Whitespace)
- Selettore di attributo con divisione per trattino (Attribute Selector with Hyphen)
6.2 Selettore di attributo
Il selettore di attributo seleziona gli elementi, che hanno l'attributo specificato, indipendentemente dal suo valore.
Sintassi:
[attributo] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi che hanno l'attributo title */
[title] {
color: blue;
}
<p title="Questo è un titolo">Questo testo sarà blu.</p>
<p>Questo testo non sarà blu.</p>
6.3 Selettore di attributo con valore
Il selettore di attributo con valore seleziona gli elementi, i cui attributi hanno il valore specificato.
Sintassi:
[attributo="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi il cui attributo title ha il valore "Esempio" */
[title="Esempio"] {
color: green;
}
<p title="Esempio">Questo testo sarà verde.</p>
<p title="Altro esempio">Questo testo non sarà verde.</p>
6.4 Selettore di attributo con prefisso
Il selettore di attributo con prefisso seleziona gli elementi, i cui attributi iniziano con il valore specificato.
Sintassi:
[attributo^="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi il cui attributo title inizia con "Inizio" */
[title^="Inizio"] {
color: red;
}
<p title="Inizio del testo">Questo testo sarà rosso.</p>
<p title="Non inizio">Questo testo non sarà rosso.</p>
6.5 Selettore di attributo con suffisso
Il selettore di attributo con suffisso seleziona gli elementi, i cui attributi terminano con il valore specificato.
Sintassi:
[attributo$="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi il cui attributo title termina con "fine" */
[title$="fine"] {
color: orange;
}
<p title="Questa è la fine">Questo testo sarà arancione.</p>
<p title="Questo è l'inizio">Questo testo non sarà arancione.</p>
6.6 Selettore di attributo contenente sottostringa
Il selettore di attributo contenente un valore seleziona gli elementi, i cui attributi contengono il valore specificato.
Sintassi:
[attributo*="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi il cui attributo title contiene "centro" */
[title*="centro"] {
color: purple;
}
<p title="Questo è il centro del testo">Questo testo sarà viola.</p>
<p title="Nessun centro qui">Questo testo non sarà viola.</p>
6.7 Selettore di attributo con divisione per spazio
Il selettore di attributo con divisione per spazio seleziona gli elementi, il cui attributo contiene uno o più valori, separati da spazi. Questo è utile per selezionare elementi con classi o ruoli specifici.
Sintassi:
[attributo~="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti gli elementi il cui attributo class contiene "highlight" nell'elenco delle classi */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight special">Questo testo avrà uno sfondo giallo.</p>
<p class="special highlight">Anche questo testo avrà uno sfondo giallo.</p>
<p class="special">Questo testo non avrà uno sfondo giallo.</p>
6.8 Selettore di attributo con divisione per trattino
Il selettore di attributo con divisione per trattino seleziona gli elementi, il cui attributo contiene il valore specificato o inizia con il valore specificato, seguito da un trattino.
Sintassi:
[attributo|="valore"] {
proprietà: valore;
proprietà: valore;
}
Esempio:
p[lang|="ru"] {
font-style: italic;
}
<p lang="ru">Questo testo sarà in corsivo.</p>
<p lang="ru-RU">Anche questo testo sarà in corsivo.</p>
<p lang="en">Questo testo non sarà in corsivo.</p>
GO TO FULL VERSION