Proč dochází k dědičnosti selektorů v CSS?

Dědičnost v CSS nastává proto, že vlastnosti stylu mohou být předávány od rodičovských prvků k jejich dětským prvkům. To je definováno specifikací CSS za účelem zjednodušení stylování a zabránění opakování kódu.

Ne všechny vlastnosti CSS jsou děděny. Zde jsou některé příklady děděných a neděděných vlastností:

Děděné vlastnosti	Neděděné vlastnosti
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mechanismus dědičnosti je určen prohlížečem na základě hierarchie prvků v dokumentu HTML (strom DOM). Pokud dětský prvek nemá explicitně přiřazenou hodnotu pro děditelnou vlastnost, dědí ji od nejbližšího předka, který má tuto vlastnost definovanou.

/* Nastavení barvy na červenou */
body {
  color: red;
}

/* Všechny dětské prvky těla, které nemají definovanou vlastnost color, budou červené */
p {
  /* Tento odstavec bude červený */
}

/* Přepsání vlastnosti color pro konkréní prvek */
div {
  color: blue;
}

/* Odstavec uvnitř tohoto divu bude modrý */
div p {
  /* Tento odstavec bude modrý */
}

Použitím dědičnosti lze nastavovat společné styly pro velké bloky obsahu, které se automaticky předávají dětským prvkům, pokud není uvedeno jinak. To zlepšuje udržovatelnost a čitelnost kódu.