CSS'de seçicilerin kalıtımı neden olur?

CSS'te kalıtım, stil özelliklerinin ebeveyn öğelerden çocuk öğelere aktarılabilmesi nedeniyle gerçekleşir. Bu, CSS spesifikasyonu tarafından stilizasyonu basitleştirmek ve kod tekrarını önlemek amacıyla tanımlanmıştır.

Tüm CSS özellikleri kalıtımsal değildir. İşte bazı kalıtılabilir ve kalıtılamaz özellik örnekleri:

Kalıtılabilir özellikler	Kalıtılamaz özellikler
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Kalıtım mekanizması, HTML belgesindeki (DOM ağacı) öğelerin hiyerarşisine göre tarayıcı tarafından belirlenir. Bir çocuk öğeye, kalıtılabilir bir özellik için açık bir değer atanmadıysa, bu özellik en yakın ata öğesinden bu değeri alır.

/* Renk kırmızı olarak atanır */
body {
  color: red;
}

/* Body'nin tüm çocuk öğeleri, color özelliği tanımlı olmayanlar kırmızı olur */
p {
  /* Bu paragraf kırmızı olacak */
}

/* Belirli bir öğe için color özelliği yeniden tanımlanır */
div {
  color: blue;
}

/* Bu div içindeki paragraf mavi olacak */
div p {
  /* Bu paragraf mavi olacak */
}

Kalıtım kullanılarak, büyük içerik blokları için ortak stiller belirlenebilir ve çocuk öğeler bu stilleri otomatik olarak alır, aksi belirtilmedikçe. Bu, kodun bakımını ve okunabilirliğini artırır.