Prečo sa selektory v CSS nadmerne dedičia?

Selektory v CSS sa dedičnosťou nie sú. Dedičnosť v CSS sa týka odovzdávania niektorých vlastností prvku jeho potomkom. Selektory sú vzory, ktoré vyberajú prvky na použitie štýlov.

Dedičnosť môže znamenať, že štýly aplikované pomocou jedného selektora môžu byť prepísané (zdedené) štýlmi aplikovanými pomocou iného selektora. To nesúvisí s dedičnosťou, ale s mechanizmom kaskádovania CSS, ktorý určuje, ktoré štýly sa aplikujú na prvok, keď viaceré pravidlá CSS nastavujú hodnotu pre rovnakú vlastnosť.

Faktory ovplyvňujúce kaskádovanie a "prepísanie" štýlov:

1. Špecifickosť (Specificity): Selektory s vyššou špecifickosťou majú väčšiu váhu.
2. Poradie (Order): Pri rovnakej špecifickosti sa aplikuje pravidlo, ktoré bolo deklarované ako posledné.
3. Dôležitosť (!important): Deklarácie označené !important majú najvyššiu prioritu (okrem vložených štýlov User Agent s !important).
4. Zdroj štýlov (Origin): Štýly pochádzajú z rôznych zdrojov (prehliadač, používateľ, autor).

Príklad špecifickosti:

/* Nízka špecifickosť */
p {
  color: blue;
}

/* Vysoká špecifickosť - prepíše farbu */
.text-section p {
  color: red;
}