Selettori e cascata

Quando due regole danno allo stesso elemento colori diversi, il CSS non tira a indovinare. Confronta i selettori, e un id batte qualsiasi numero di classi.

Scegliere gli elementi

Un selettore è uno schema che individua elementi nella pagina. I più semplici li scelgono per nome dell'elemento, per classe o per id. p è un selettore di tipo e individua tutti i paragrafi. .note è un selettore di classe e individua tutti gli elementi con class="note"; un elemento può avere più classi separate da spazi, e una classe può essere usata su molti elementi. #intro è un selettore di id e individua l'unico elemento con id="intro". *, il selettore universale, individua tutto.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Combinare i selettori

Una virgola raggruppa selettori che condividono le stesse dichiarazioni, quindi h1, h2 dà stile a entrambi. Uno spazio è il combinatore discendente: nav a individua i link in qualunque punto dentro un nav, a qualsiasi profondità. > è più severo e individua solo i figli diretti. Scrivere due selettori semplici attaccati, senza spazio, come in a.active, significa che uno stesso elemento deve soddisfarli entrambi: un link che ha anche la classe active. I selettori di attributo, tra parentesi quadre, scelgono in base a un attributo, come input[type="email"].

Le pseudo-classi, scritte con un solo due punti, scelgono elementi in un certo stato o posizione: :hover mentre il puntatore ci passa sopra, :focus-visible quando l'elemento ha il focus da tastiera, :first-child quando è il primo figlio del suo genitore. Gli pseudo-elementi, scritti con due volte i due punti, danno stile a una parte di un elemento, come ::first-line o ::placeholder.

Quando le regole non sono d'accordo

Spesso più regole impostano la stessa proprietà sullo stesso elemento. La cascata, la C di CSS, decide quale vince. Lasciando da parte gli stili del browser e !important, due domande risolvono quasi tutti i casi. Primo: quale selettore è più specifico? La specificità si conta con tre numeri: gli id, poi le classi (compresi i selettori di attributo e le pseudo-classi), poi i nomi degli elementi. #menu a vale 1-0-1, .active vale 0-1-0 e nav a vale 0-0-2. I numeri si confrontano da sinistra, quindi un id batte qualsiasi numero di classi. Secondo: se la specificità è uguale, vince la regola che viene dopo nel foglio di stile.

Gli attributi style in linea battono qualsiasi selettore, e una dichiarazione marcata !important batte quelle normali. Sono soluzioni rapide che tentano, ma rendono più difficile la modifica successiva, perché l'unico modo per superarle è usarne ancora. Quasi tutti i gruppi di lavoro tengono la specificità bassa e uniforme, dando stile soprattutto con le classi, così l'ordine nel file basta per prevedere il risultato.

Ereditarietà

Alcune proprietà passano da genitore a figlio da sole. Imposta color o font-family su body e ogni paragrafo, elenco e cella di tabella al suo interno li riprende, a meno che una regola non imposti valori propri. Le proprietà legate al testo di solito si ereditano; quelle legate al riquadro, come width, padding, border e margin, no. Per questo un bordo su una sezione non compare intorno a ogni paragrafo che contiene. La parola chiave inherit obbliga una proprietà a copiare il valore del genitore.

Dai alle classi il nome di ciò che una cosa è, non di come appare. .warning ha ancora senso quando il designer cambia il colore da rosso ad arancione; .red-text no. Gli id sono unici, quindi conviene riservarli alle destinazioni dei link e alle etichette dei moduli invece che allo stile: così la specificità resta bassa.