Miks CSS-is toimub valijate pärimine?

CSS-is pärandumine toimub seetõttu, et stiiliomadused võivad edastuda vanemelementidelt nende lasteelementidele. See on määratletud CSS-spetsifikatsioonis, et lihtsustada stiilide rakendamist ja vältida koodi kordamist.

Kõik CSS omadused ei ole päranduvad. Siin on mõned näited päranduvatest ja mitte-päranduvatest omadustest:

Päranduvad omadused	Mitte-päranduvad omadused
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Pärandumismehhanism määratakse brauseri poolt HTML-dokumendi (DOM-puu) elementide hierarhia alusel. Kui lapselelement ei ole otseselt määratud väärtust pärandatavale omadusele, siis see pärib selle lähimalt esivanemalt, kellel see omadus on määratletud.

/* Määrame värvi punaseks */
body {
  color: red;
}

/* Kõik body lapseelemendid, kellel ei ole määratud omadust color, saavad punase värvi */
p {
  /* See lõik on punane */
}

/* Üle kirjutame omaduse color konkreetsele elemendile */
div {
  color: blue;
}

/* Selle div-i sees olev lõik on sinine */
div p {
  /* See lõik on sinine */
}

Kasutades pärandumist, saab määrata üldised stiilid suurtele sisutükkidele, mis automaatselt päranduvad lapseelementidelt, välja arvatud juhul, kui on näidatud teisiti. See parandab koodi hooldatavust ja loetavust.