Kako funkcionišu različiti prioriteti stilova u CSS?

U CSS-u, prioritet stilova određuje se pomoću mehanizma kaskadiranja i specifičnosti selektora. Osnovni principi su:

1. Specifičnost — to je težina selektora, koja se računa na osnovu broja ID-ova, klasa, tagova i drugih komponenti. Što je veća specifičnost, to je stil prioritetniji.

   • ID selektor (#id) ima visok prioritet.
   • Klase (.klasa), atributi i pseudoklase imaju srednji prioritet.
   • Tagovi (div, p) imaju nizak prioritet.

2. Kaskadiranje — ako dva pravila imaju istu specifičnost, primenjuje se ono koje je deklarisano kasnije u kodu.

3. !important — dodaje maksimalni prioritet stilu, prepisujući druga pravila, osim drugih !important sa višom specifičnošću.

4. Nasleđivanje — neke osobine (color, font-family) se nasleđuju od roditelja ako nisu prepisane.

Primer:

#header { color: red; }       /* specifičnost 100 */
.menu { color: blue; }        /* specifičnost 10  */
div { color: green; }         /* specifičnost 1   */

/* Ako element ima id="header" i klasu="menu", boja će biti crvena */

Na ovaj način, pregledač bira stil sa najvišom specifičnošću, uzimajući u obzir redosled i prisustvo !important.