Nella lezione precedente, abbiamo visto l'esempio di come far diventare un testo verde. Per farlo, è necessario utilizzare i selettori CSS. In questa lezione, vediamo tutti i diversi tipi di selettori CSS necessari per specificare uno stile ad un determinato elemento della pagina.
Un selettore CSS è una parte del codice che dice al browser a quali elementi di una pagina web deve essere dato uno specifico stile. Guarda questo esempio per capire:
<p>Una scritta verde.</p>
<style>
p {
color: green;
}
</style>In questo caso, abbiamo specificato che lo stile color:green deve essere dato a tutti i tag <p> presenti (nell'esempio, ne è presente solo uno). Così facendo, tutti i <p> avranno il testo colorato in verde.
Utilizzando i selettori, quindi, è possibile specificare determinati stili a determinati elementi all'interno della pagina. In questo modo, possiamo creare la pagina web con il layout e lo stile che desideriamo.
Vediamo quali sono i diversi tipi di selettori CSS che possiamo usare.
| Selettore | Descrizione |
tag{...} | Specifica il tag (ad esempio <p>) a cui si deve assegnare lo stile. |
.classe{...} | Specifica gli elementi con la classe, contenuta nell'attributo class, a cui si deve assegnare lo stile. |
#id{...} | Specifica l'elemento con l'id, contenuto nell'attributo id, a cui si deve assegnare lo stile. |
[attributo]{...} o[attributo="valore"]{...} | Attribuisce lo stile agli elementi che hanno un attributo, o un determinato valore di un attributo. |
*{...} | Tutti gli elementi della pagina ottengono lo stile indicato. |
| Pseudo-classi | Specifica uno stile per una pseudo-classe di un elemento. |
| Pseudo-elementi | Specifica lo stile per uno pseudo-elemento di un elemento. |
Ora vediamoli in dettaglio.
Il selettore CSS del tag specifica uno stile che deve assegnare a tutti i tag HTML del selettore.
Ad esempio, vogliamo rendere il colore del testo blu e la dimensione del testo di 20px (vedremo il colore del testo e lo stile dei testi nelle prossime lezioni) a tutti gli elementi <p> presenti. Ecco come fare:
<p>Questo testo ha lo stile</p>
<p>E anche questo qui</p>
<style>
p {
color: blue;
font-size: 20px;
}
</style>Il selettore CSS della classe specifica uno stile ad uno o tutti gli elementi che hanno una determinata classe, che è contenuta dell'attributo class degli elementi HTML. Abbiamo parlato delle classi nella lezione sugli identificativi degli elementi HTML.
Ad esempio, vogliamo rendere di colore verde tutti gli elementi con classe verde. Ecco come possiamo farlo:
<p class="verde">Questo testo ha lo stile</p>
<style>
.verde {
color: green;
}
</style>Nota: la classe non può iniziare con un numero, ma soltanto con una lettera.
Il selettore CSS dell'id specifica l'id dell'elemento a cui si vuole attribuire lo stile. L'id è contenuto nell'attributo id dell'elemento HTML e deve essere univoco all'interno della pagina (ovvero, non si può riutilizzare per un altro elemento).
Ad esempio, vogliamo rendere di colore giallo lo sfondo di un testo che ha l'id giallo, usando la proprietà background-color. In questo modo, sembrerà che il testo sia evidenziato.
<p id="giallo">Questo testo è evidenziato</p>
<style>
#giallo {
background-color: yellow;
}
</style>Il selettore CSS dell'attributo specifica uno stile per tutti gli elementi che hanno:
[attributo] come selettore.[attributo="valore"] come selettore.Ad esempio, per tutti i link (di cui abbiamo parlato in questa lezione HTML) che hanno l'attributo href, ovvero quello che specifica a quale pagina reindirizzare l'utente, diamo uno sfondo giallo:
<a href="https://example.com">Clicca qui</a>
<style>
[href] {
background-color: yellow;
}
</style>Se, invece, dobbiamo attribuire uno sfondo giallo soltanto alle pagine che portano a biadets.com, allora possiamo fare in questo modo:
<a href="biadets.com">Vai a biadets.com</a>
<style>
[href="biadets.com"] {
background-color: yellow;
}
</style>Il selettore universale * permette di selezionare tutti gli elementi all'interno della pagina HTML.
Se, ad esempio, vogliamo dare a tutti gli elementi uno sfondo rosso, allora possiamo fare in questo modo:
* {
background-color: red;
}Le pseudo-classi specificano uno stato di un elemento, ad esempio quando è cliccato dal mouse. Quando l'elemento si trova in quel determinato stato, viene attributo lo stile.
Approfondiremo questo argomento, essendo abbastanza ampio, nella lezione sulle pseudo-classi.
Gli pseudo-elementi sono selettori speciali che permettono di aggiungere stili o contenuti a specifici elementi della pagina senza dover modificare l'HTML.
Approfondiremo questo argomento, essendo come le pseudo-classi molto ampio, nella lezione sugli pseudo-elementi.
È possibile combinare più selettori insieme per specificare meglio un elemento. Per farlo, basta unire i selettori insieme, senza aggiungere spazi. Ad esempio, proviamo ad utilizzare il selettore p e la classe elemento:
<p class="elemento">Questo elemento ha lo stile</p>
<style>
p.elemento{
color:green;
}
</style>In questo modo, identifico soltanto quell'elemento che ha sia il tag p che la classe elemento. La sintassi da utilizzare è sempre:
tag (facoltativo) + classe/id + classe/id + ...
Nota: il tag, se inserito, va scritto sempre per primo.
Proviamo a fare degli esempi per capire meglio. Abbiamo questo tipo di elemento:
<p class="elemento" id="testo">Questo elemento ha lo stile</p>Ecco tutti i modi che abbiamo per identificarlo (con i selettori combinati):
p.elemento {color:green;}
p#testo {color:green;}
p.elemento#testo {color:green;}
p#testo.elemento {color:green;}
.elemento#testo {color:green;}
#testo.elemento {color:green;}Rispetto ai selettori multipli, ci sono altre cose da sapere. Potremmo approfondire di più nella lezione sui selettori combinati.
Se vogliamo dare uno stile a più elementi diversi, che non hanno lo stesso selettore, possiamo indicare più selettori separati dalla virgola. Ad esempio:
<p>Elemento 1</p> <span class="el2">Elemento 2</span>
<style>
p, .el2 {color:green;}
</style>In questo modo, verrà attribuito lo stile a tutti i <p> e a tutti gli elementi con classe el2. Possiamo anche inserire più di due selettori, ad esempio: p, span, .elemento, #elem, ...