Selettori per attributo
Selezionano elementi in base al valore di un loro attributo HTML:
a[target="_blank"] {
color: orange;
}
img[src^="icone/"] {
border: 1px solid gray; /* il valore INIZIA con "icone/" */
}
Operatori principali: [attr="valore"] (esatto), [attr^="valore"] (inizia con), [attr$="valore"] (termina con), [attr*="valore"] (contiene).
Selettori discendenti e combinatori
.contenitore p { color: green; } /* tutti i <p> dentro .contenitore, a qualunque livello */
.contenitore > p { color: green; } /* solo i <p> FIGLI DIRETTI di .contenitore */
h2 + p { font-weight: bold; } /* solo il <p> subito dopo un <h2> */
h2 ~ p { color: gray; } /* tutti i <p> che seguono un <h2>, allo stesso livello */
Questi combinatori evitano di dover aggiungere classi ovunque nell’HTML: puoi colpire elementi precisi basandoti sulla loro posizione nella struttura.
Colori in CSS
Puoi specificare un colore in diversi modi:
h1 {
color: red; /* nome del colore */
color: #ff0000; /* esadecimale */
color: rgb(255, 0, 0); /* RGB: rosso, verde, blu da 0 a 255 */
color: rgba(255, 0, 0, 0.5); /* RGB + trasparenza (alpha) da 0 a 1 */
}
rgba() è utile quando serve un colore semi-trasparente, ad esempio per uno sfondo che lasci intravedere ciò che c’è sotto.
Sfondi
div {
background-color: #f0f0f0;
background-image: url("sfondo.jpg");
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
background-position: center;
background-size: cover; /* copre tutto lo spazio, mantenendo le proporzioni */
}
background-size: cover è probabilmente il valore che userai più spesso per immagini di sfondo a tutta larghezza.
Esercitazione pratica
Su una pagina esistente, usa un selettore per attributo per stilizzare diversamente i link esterni, e un selettore discendente per colorare solo i paragrafi dentro una sezione specifica. Applica poi uno sfondo a colore e uno sfondo a immagine su due elementi diversi.