Selettori CSS
Un selettore CSS seleziona gli elementi HTML a cui vuoi applicare lo stile.
Selettori CSS
I selettori CSS vengono utilizzati per "trovare" (o selezionare) gli elementi HTML a cui si desidera applicare uno stile.
Possiamo dividere i selettori CSS in cinque categorie:
- Selettori semplici (seleziona gli elementi in base a nome, id, classe)
- Selettori combinatori (seleziona gli elementi in base a una specifica relazione tra loro)
- Selettori di pseudo-classe (seleziona gli elementi in base a un determinato stato)
- Selettori di pseudo-elementi (selezionare e definire lo stile di una parte di un elemento)
- Selettori di attributo (seleziona gli elementi in base a un attributo o al valore di un attributo)
Questa pagina spiegherà i selettori CSS più basilari.
Il selettore di elementi CSS
Il selettore di elementi seleziona gli elementi HTML in base al nome dell'elemento.
Esempio
Qui, tutti gli elementi <p> sulla pagina saranno allineati al centro, con un colore di testo rosso:
p
{
text-align: center;
color: red;
}
Il selettore di ID CSS
Il selettore id utilizza l'attributo id di un elemento HTML per selezionare un elemento specifico.
L'id di un elemento è unico all'interno di una pagina, quindi il selettore dell'id viene utilizzato per selezionare un elemento univoco!
Per selezionare un elemento con un ID specifico, scrivi un carattere hash (#), seguito dall'id dell'elemento.
Esempio
La regola CSS di seguito verrà applicata all'elemento HTML con id="para1":
#para1
{
text-align: center;
color: red;
}
Nota: un nome ID non può iniziare con un numero!
Il selettore di classe CSS
Il selettore di classe seleziona gli elementi HTML con un attributo di classe specifico.
Per selezionare elementi con una classe specifica, scrivi un punto (.), seguito dal nome della classe.
Esempio
In questo esempio tutti gli elementi HTML con class="center" saranno rossi e allineati al centro:
.center {
text-align: center;
color: red;
}
Puoi anche specificare che solo elementi HTML specifici dovrebbero essere interessati da una classe.
Esempio
In questo esempio solo gli elementi <p> con class="center" saranno rossi e allineati al centro:
p.center {
text-align: center;
color: red;
}
Gli elementi HTML possono anche fare riferimento a più di una classe.
Esempio
In questo esempio l'elemento <p> sarà stilizzato secondo class="center" e class="large":
<p class="center large">This paragraph refers to two classes.</p>
Nota: il nome di una classe non può iniziare con un numero!
Il selettore universale CSS
Il selettore universale (*) seleziona tutti gli elementi HTML nella pagina.
Esempio
La regola CSS di seguito influirà su ogni elemento HTML della pagina:
*
{
text-align: center;
color: blue;
}
Il selettore di raggruppamento CSS
Il selettore di raggruppamento seleziona tutti gli elementi HTML con le stesse definizioni di stile.
Osserva il seguente codice CSS (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;
}
Sarà meglio raggruppare i selettori, per minimizzare il codice.
Per raggruppare i selettori, separa ogni selettore con una virgola.
Esempio
In questo esempio abbiamo raggruppato i selettori dal codice sopra:
h1, h2, p
{
text-align: center;
color: red;
}
Tutti i selettori semplici CSS
Selector | Example | Example description |
---|---|---|
#id | #firstname | Selects the element with id="firstname" |
.class | .intro | Selects all elements with class="intro" |
element.class | p.intro | Selects only <p> elements with class="intro" |
* | * | Selects all elements |
element | p | Selects all <p> elements |
element,element,.. | div, p | Selects all <div> elements and all <p> elements |