Miért történik a szelektorok öröklése a CSS-ben?

A CSS-ben az öröklődés akkor történik, amikor a stílus tulajdonságok átadhatók a szülő elemekről azok gyermek elemeire. Ez a CSS specifikáció által van meghatározva, hogy egyszerűsítse a stílusozást és elkerülje a kód ismétlését.

Nem minden CSS tulajdonság öröklődik. Íme néhány példa az öröklődő és nem öröklődő tulajdonságokra:

Öröklődő tulajdonságok	Nem öröklődő tulajdonságok
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Az öröklődés mechanizmusa a böngésző által van meghatározva az HTML dokumentumban (DOM-fa) lévő elemek hierarchiája alapján. Ha egy gyermek elemnek nincs kifejezetten megadva egy öröklődő tulajdonság értéke, akkor az a legközelebbi őstől örökli, akinél ez a tulajdonság meghatározott.

/* Szín beállítása pirosra */
body {
  color: red;
}

/* Minden body gyermek elem, amelynek nincs meghatározva a color tulajdonsága, piros lesz */
p {
  /* Ez a bekezdés piros lesz */
}

/* A color tulajdonság felülírása egy adott elem számára */
div {
  color: blue;
}

/* Ennek a divnek a belsejében lévő bekezdés kék lesz */
div p {
  /* Ez a bekezdés kék lesz */
}

Az öröklődés használatával általános stílusokat lehet beállítani nagy tartalmi blokkokhoz, amelyek automatikusan átadódnak a gyermek elemeknek, kivéve, ha másképp van megadva. Ez javítja a kód karbantarthatóságát és olvashatóságát.