Selector di attributi in CSS

1. Tipi di selector di attributi

I selector di attributi in CSS consentono di selezionare gli elementi HTML in base ai valori dei loro attributi, come id, class, name, type, ecc. Offrono flessibilità e precisione nella selezione degli elementi, il che è particolarmente utile per la stilizzazione di elementi di form, link e altri elementi con attributi unici. In questo articolo esamineremo i vari tipi di selector di attributi e il loro utilizzo.

I selector di attributi si dividono in diverse categorie che consentono di selezionare elementi in base alla presenza dell'attributo, al suo valore esatto o a una sua parte. I principali tipi di selector di attributi sono:

1. Selector di attributi: seleziona elementi che contengono un determinato attributo, indipendentemente dal suo valore.
2. Selector di attributi con valore: seleziona elementi con un attributo uguale al valore specificato.
3. Selector di attributi con valore iniziale: seleziona elementi il cui valore dell'attributo inizia con un prefisso specifico.
4. Selector di attributi con valore finale: seleziona elementi il cui valore dell'attributo termina con un suffisso specifico.
5. Selector di attributi contenente un valore: seleziona elementi il cui valore dell'attributo contiene una determinata sottostringa.
6. Selector di attributi con separazione per spazi: seleziona elementi con un attributo il cui valore contiene una determinata parola separata da spazi.
7. Selector di attributi con separazione per trattino: seleziona elementi con un attributo il cui valore contiene una determinata parola separata da trattini.

2. Selector di attributi (Attribute Selector)

Il selector di attributi seleziona elementi che hanno un determinato attributo, indipendentemente dal suo valore. Questo selector è utile quando devi selezionare tutti gli elementi con un determinato attributo.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

In questo esempio, tutti gli elementi <input> con l'attributo type riceveranno un bordo nero, indipendentemente dal valore di questo attributo.

3. Selector di attributi con valore

Il selector di attributi con valore seleziona elementi il cui attributo è uguale a un determinato valore. Questo è utile quando hai bisogno di selezionare elementi con uno specifico valore dell'attributo, ad esempio tutti i campi di testo o i link che si aprono in una nuova scheda.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Qui solo il campo di testo <input type="text"> riceverà uno sfondo grigio chiaro.

4. Selector di attributi con valore iniziale

Il selector di attributi con valore iniziale seleziona elementi il cui valore dell'attributo inizia con un determinato prefisso. Il prefisso è indicato dopo il simbolo ^=. Questo selector è utile, ad esempio, per selezionare tutti i link che portano a un determinato sito.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Link al sito example.com</a>
<a href="https://another.com">Altro link</a>
    
  

Solo il primo link sarà colorato in verde, perché inizia con "https://example.com".

5. Selector di attributi con valore finale

Il selector di attributi con valore finale seleziona elementi il cui valore dell'attributo termina con un determinato suffisso. Il suffisso è indicato dopo il simbolo $=. Questo selector è utile per selezionare file di un determinato tipo, come immagini in formato .png.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Immagine 1">
<img src="image2.jpg" alt="Immagine 2">
    
  

Qui solo l'immagine con estensione .png riceverà un bordo blu.

6. Selector di attributi contenente un valore

Il selector di attributi contenente un valore seleziona elementi il cui valore dell'attributo contiene una determinata sottostringa. La sottostringa è indicata dopo il simbolo *=. Questo selector è utile quando devi selezionare elementi con un attributo che contiene una parte specifica del valore, ad esempio link a una sezione specifica di un sito.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Link alla sezione 1</a>
<a href="https://example.com/about">Chi siamo</a>
<a href="https://example.com/section2">Link alla sezione 2</a>
    
  

Solo i link che contengono "section" nel loro href saranno evidenziati con il grassetto.

7. Selector di attributi con separazione per spazi

Il selector di attributi con separazione per spazi seleziona elementi il cui valore dell'attributo contiene una determinata parola separata da spazi. Per questo selector viene utilizzato il simbolo ~=. Viene spesso usato per selezionare elementi con classi specifiche o altri attributi che contengono più valori separati da spazi.

    
[class~="featured"] {
  background-color: yellow;
}
    
  

    
<div class="featured item">Elemento con classe "featured"</div>
<div class="item">Elemento normale</div>
<div class="highlight featured">Altro elemento con classe "featured"</div>
    
  

Qui solo gli elementi che contengono featured nell'elenco delle classi riceveranno uno sfondo giallo.

8. Selector di attributi con separazione per trattino

Il selector di attributi con separazione per trattino seleziona elementi il cui valore dell'attributo inizia con un determinato valore e può essere completato con un trattino. Il simbolo |= viene utilizzato per selezionare elementi il cui valore corrisponde a quello specificato o inizia con esso ed è separato da un trattino.

    
[lang|="en"] {
  color: blue;
}
    
  

    
<p lang="en">Testo in lingua inglese</p>
<p lang="en-us">Testo in inglese americano</p>
<p lang="fr">Testo in lingua francese</p>
    
  

Qui solo gli elementi con l'attributo lang uguale a "en" o che iniziano con "en-", per esempio "en-us", saranno colorati di blu.

9. Esempio di utilizzo di vari selector di attributi

Di seguito è mostrato un esempio di HTML e CSS che dimostra l'applicazione di vari selector di attributi.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di selector di attributi CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Campo di testo">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Link a example.com</a>
<a href="https://example.com/section2">Link alla sezione</a>

<img src="image.png" alt="Immagine PNG">
<img src="photo.jpg" alt="Immagine JPG">

<div class="featured item">Elemento con classe "featured"</div>
<div class="item">Elemento normale</div>
<div class="highlight featured">Altro elemento con classe "featured"</div>

<p lang="en">Testo in lingua inglese</p>
<p lang="en-us">Testo in inglese americano</p>
<p lang="fr">Testo in lingua francese</p>
</body>
</html>

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di selector di attributi CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Campo di testo">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Link a example.com</a>
<a href="https://example.com/section2">Link alla sezione</a>

<img src="image.png" alt="Immagine PNG">
<img src="photo.jpg" alt="Immagine JPG">

<div class="featured item">Elemento con classe "featured"</div>
<div class="item">Elemento normale</div>
<div class="highlight featured">Altro elemento con classe "featured"</div>

<p lang="en">Testo in lingua inglese</p>
<p lang="en-us">Testo in inglese americano</p>
<p lang="fr">Testo in lingua francese</p>
</body>
</html>

/* Selector di attributi */
input[type] {
  border: 1px solid black;
}

/* Selector di attributi con valore */
input[type="text"] {
  background-color: #f0f0f0;
}

/* Selector di attributi con valore iniziale */
a[href^="https://example.com"] {
  color: green;
}

/* Selector di attributi con valore finale */
img[src$=".png"] {
  border: 2px solid blue;
}

/* Selector di attributi contenente un valore */
a[href*="section"] {
  font-weight: bold;
}

/* Selector di attributi con separazione per spazi */
[class~="featured"] {
  background-color: yellow;
}

/* Selector di attributi con separazione per trattino */
[lang|="en"] {
  color: blue;
}