Waarom vindt er erfelijkheid van selectors plaats in CSS?

Vererving in CSS gebeurt omdat stijl-eigenschappen kunnen worden doorgegeven van ouderlijke elementen naar hun kindelementen. Dit is gedefinieerd door de CSS-specificatie om het stylen te vereenvoudigen en herhaling van code te voorkomen.

Niet alle CSS-eigenschappen worden geërfd. Hier zijn enkele voorbeelden van erfbare en niet-erfbare eigenschappen:

Erfbare eigenschappen	Niet-erfbare eigenschappen
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Het erfmechanisme wordt bepaald door de browser op basis van de hiërarchie van elementen in het HTML-document (DOM-boom). Als een kindelement geen expliciete waarde voor een erfbare eigenschap heeft, erft het de waarde van zijn dichtstbijzijnde voorouder die deze eigenschap heeft gedefinieerd.

/* Stel de kleur in op rood */
body {
  color: red;
}

/* Alle kindelementen van body zonder eigen color-eigenschap worden rood */
p {
  /* Dit alinea wordt rood */
}

/* Overschrijf de color-eigenschap voor een specifiek element */
div {
  color: blue;
}

/* De alinea binnen deze div wordt blauw */
div p {
  /* Deze alinea wordt blauw */
}

Door gebruik te maken van erfenis kunnen algemene stijlen worden ingesteld voor grote inhoudsblokken, die automatisch door de kindelementen worden overgenomen, tenzij anders aangegeven. Dit verbetert het onderhoud en de leesbaarheid van de code.