Kāpēc CSS notiek selektoru mantošana?

CSS mantošana notiek tāpēc, ka stila īpašības var tikt nodotas no vecāku elementiem uz to bērniem. Tas ir definēts CSS specifikācijā, lai vienkāršotu stilu uzstādīšanu un izvairītos no koda atkārtošanas.

Visas CSS īpašības nav mantotas. Šeit ir daži piemēri mantotām un nemantotām īpašībām:

Mantotās īpašības	Nemantotās īpašības
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mantošanas mehānisms ir noteikts pārlūkprogrammas pēc HTML dokumenta (DOM koka) elementu hierarhijas. Ja bērna elementam nav tieši piešķirta vērtība mantotajai īpašībai, tas to manto no tuvākā vecāka, kurš šo īpašību ir definējis.

/* Uzstāda krāsu uz sarkanu */
body {
  color: red;
}

/* Visu body bērnu elementu, kuriem nav definēta īpašība color, būs sarkani */
p {
  /* Šis rindkopas teksts būs sarkans */
}

/* Pārdefinē īpašību color konkrētam elementam */
div {
  color: blue;
}

/* Šī div elementa iekšpusē esošā rindkopa būs zila */
div p {
  /* Šī rindkopa būs zila */
}

Izmantojot mantošanu, var noteikt kopīgus stilus lieliem satura blokiem, kas automātiski tiek mantoti no bērnu elementiem, ja nav norādīts citādi. Tas uzlabo koda uzturēšanu un lasāmību.