Zašto dolazi do naslednosti selektora u CSS-u?

Nasleđivanje u CSS-u dešava zato što svojstva stilova mogu biti preneta od roditeljskih elemenata na njihove deca. Ovo je definisano od strane CSS specifikacije radi pojednostavljenja stilizacije i izbegavanja ponovnog pisanja koda.

Nije sve CSS svojstvo nasledno. Evo nekoliko primera naslednih i ne naslednih svojstava:

Nasledna svojstva	Nenasledna svojstva
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mehanizam nasleđivanja je definisan od strane pregledača na osnovu hijerarhije elemenata u HTML dokumentu (DOM stablo). Ako detetov element nema eksplicitno dodeljenu vrednost za nasledno svojstvo, on nasleđuje vrednost od najbližeg pretka koji ima to svojstvo definisano.

/* Dodeljujemo boju crvenu */
body {
  color: red;
}

/* Svi dečiji elementi body, koji nemaju definisano svojstvo color, biće crveni */
p {
  /* Ovaj paragraf će biti crven */
}

/* Prepisujemo svojstvo color za određeni element */
div {
  color: blue;
}

/* Paragraf unutar ovog div-a biće plav */
div p {
  /* Ovaj paragraf biće plav */
}

Koristeći nasleđivanje, možemo postaviti zajedničke stilove za velike blokove sadržaja, koji će se automatski naslediti od strane dece, osim ako nije drugačije naznačeno. Ovo poboljšava održavanje i čitljivost koda.