Prečo dochádza k dedeniu selektorov v CSS?

Dedičnosť v CSS nastáva preto, lebo vlastnosti štýlu môžu byť prenesené od rodičovských prvkov na ich deti. Toto je definované špecifikáciou CSS na zjednodušenie štýlovania a na zabránenie opakovania kódu.

Nie všetky vlastnosti CSS sú dediace. Tu sú niektoré príklady dediace a nedediace vlastnosti:

Dediace vlastnosti	Nedediace vlastnosti
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mechanizmus dedičnosti je určený prehliadačom na základe hierarchie prvkov v dokumente HTML (strom DOM). Ak má dieťaťový prvok nepriradenú explicitnú hodnotu pre dediacu vlastnosť, dedí ju od najbližšieho predka, ktorý má túto vlastnosť definovanú.

/* Nastavíme farbu na červenú */
body {
  color: red;
}

/* Všetky deti prvku body, ktoré nemajú definovanú vlastnosť color, budú červené */
p {
  /* Tento odsek bude červený */
}

/* Prepíšeme vlastnosť color pre špecifický prvok */
div {
  color: blue;
}

/* Odsek vnútri tohto divu bude modrý */
div p {
  /* Tento odsek bude modrý */
}

Použitím dedičnosti môžeme nastaviť spoločné štýly pre veľké bloky obsahu, ktoré sa automaticky dedí od detí, ak nie je uvedené inak. To zlepšuje údržbu a čitateľnosť kódu.