Selettori e cascata

CSS (Cascading Style Sheets) è il linguaggio che controlla la presentazione visiva. Si scrivono regole: ogni regola ha un selettore che individua gli elementi e un blocco di dichiarazioni con coppie proprietà-valore.

I tre selettori fondamentali: type individua tutti gli elementi di un tag (p), class individua gli elementi con una classe (.card), ID individua un elemento tramite il suo id (#logo). Preferisca le classi: gli ID hanno una specificità molto elevata.

Selezioni in base al valore di un attributo con [type="email"]. Utilizzi le pseudo-classi per indicare uno stato: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

I combinatori descrivono le relazioni tra gli elementi: spazio (discendente), > (figlio diretto), + (fratello adiacente), ~ (fratello generico).

Quando più regole individuano lo stesso elemento, la specificità determina quale prevale. I selettori ID (0,1,0,0) prevalgono sui selettori di classe (0,0,1,0), che a loro volta prevalgono sui selettori di tipo (0,0,0,1). Gli stili inline prevalgono su tutti. !important prevale su qualsiasi altra regola: lo utilizzi solo come ultima risorsa.

Conti separatamente gli ID, le classi/attributi/pseudo-classi e i tipi. Confronti le colonne una alla volta. Esempio: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Il primo selettore prevale.

Quando la specificità è uguale, prevale la regola che compare più tardi nel foglio di stile. Questa è la C di CSS: la cascata. Sia l'ordine di importazione sia l'ordine di origine sono importanti.

Alcune proprietà CSS vengono ereditate per impostazione predefinita: gli elementi figli ricevono il valore del genitore senza che sia necessario impostarlo. Le proprietà relative al testo, come color, font-family e line-height, vengono ereditate. Le proprietà del modello a riquadri, come margin, no.

:is() e :where() consentono di scrivere selettori concisi che corrispondono a uno qualsiasi degli elementi di un elenco. La differenza è che :is() eredita la specificità più alta dei propri argomenti, mentre :where() ha sempre specificità pari a zero.

Il selettore universale * corrisponde a ogni elemento. Viene utilizzato comunemente nei reset CSS: *, *::before, *::after { box-sizing: border-box; } rende il modello a riquadri molto più prevedibile.

I browser applicano il proprio foglio di stile predefinito, il user agent stylesheet, prima del vostro. I reset CSS, come normalize.css, o i livelli CSS neutralizzano questi valori predefiniti, così lo stile parte da una base conosciuta.

Individui gli elementi con selettori di tipo, classe, ID, attributo e pseudo-classe. La specificità risolve i conflitti (ID > classi > tipi). La cascata risolve i casi di parità usando l'ordine di origine. L'ereditarietà propaga automaticamente gli stili del testo agli elementi discendenti.