I selettori CSS sono usati per "trovare" (o selezionare) elementi HTML a cui applicare lo stile.

Categorie di selettori

Possiamo dividere i selettori CSS in cinque categorie:

• Selettori semplici (selezionano gli elementi basati su nome, id, class)
• Selettori combinati (selezionano gli elementi in base a una relazione specifica tra di loro)
• Selettori Pseudo-class (selezionano gli elementi in base a un certo stato)
• Selettori Pseudo-elements (selezionano e applicano stile a una parte di un elemento)
• Selettori di attributi (selezionano gli elementi in base a un attributo o a un valore di attributo)

L'elemento selettore in CSS

L'elemento selettore seleziona elementi HTML basati sul nome dell'elemento.

Esempio

Qui, tutti gli elementi <p> della pagina saranno centrati con un testo di colore rosso:

                
p {
    text-align: center;
    color: red;
}            
                
                
            

Il selettore id in CSS

Il selettore id usa l'attributo id di un elemento HTML per selezionare uno specifico elemento.

L'id di un elemento è unito all'interno di una pagina, così il selettore id è usato per selezionare quell'unico elemento!

Per selezionare un elemento con uno specifico id, si scrive un carattere hash (#) seguito dall'id dell'elemento.

Esempio

La sotto indicata regola CSS sarà applicata all'elemento HTML con id="para1":

                
#para1 {
    text-align: center;
    color: red;
}          
                                    
                
            

Il selettore class in CSS

Il selettore class seleziona gli elementi HTML con un attributo class specifico.

Per selezionare una specifica class, si scrive un carattere punto (.) seguito dal nome della classe.

Esempio

In questo esempio tutti gli elementi HTML con class="center" saranno rossi e centrati:

                
.center {
    text-align: center;
    color: red;
}            
                                    
                
            

Si può anche indicare che solo un elemento specifico HTML può essere influenzato da una class:

Esempio

In questo esempio l'elemento <p> verrà stilizzato secondo la class="center" e la class="large":

Il selettore universale in CSS

Il selettore universale (*) seleziona tutti gli elementi HTML della pagina:

Esempio

La regola CSS sotto indicata influenzerà ogni elemento HTML della pagina:

                
* {
    text-align: center;
    color: blue;
}                           
                
            

Il selettore di gruppo in CSS

Il selettore di gruppo seleziona tutti gli elementi HTML con le stesse definizioni di stile.

Nell'esempio seguente, gli elementi h1, h2, e p hanno le stesse definizioni di stile:

                
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}          
                                    
                
            

Sarebbe meglio raggruppare i selettori per minimizzare il codice.

Per raggruppare i selettori, separare ogni selettore con una virgola (,).

Esempio

In quest'esempio abbiamo raggruppato i selettori dal codice su indicato:

                
h1, h2, p {
    text-align: center;
    color: red;
}           
                                    
                
            

Selettore	Esempio	Descrizione esempio
#id	#firstname	Seleziona l'elemento con id="firstname"
.class	.intro	Seleziona tutti gli elementi con class="intro"
element.class	p.intro	Seleziona solo gli elementi con class="intro"
*	*	Seleziona tutti gli elementi
element	p	Seleziona tutti gli elementi <p>
element, element, ...	div, p	Seleziona tutti gli elementi <div> e <p>