რატომ ხდება CSS-ში სელექტორების მემკვიდრეობა?

CSS-ში მემკვიდრეობა ხდება იმიტომ, რომ სტილის თვისებები შეიძლება გადაეცეს მშობელ ელემენტებიდან მათ შვილეულ ელემენტებს. ეს განსაზღვრულია CSS-ის სპეციფიკაციით, რათა გამარტივდეს სტილიზაცია და თავიდან აიცილოს კოდის გამეორება.

ყველა CSS თვისება არ არის მემკვიდრეობითი. აქ არის რამდენიმე მაგალითი მემკვიდრეობით და არ მემკვიდრეობით თვისებების:

მემკვიდრეობითი თვისებები	არ მემკვიდრეობითი თვისებები
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

მემკვიდრეობის მექანიზმი განსაზღვრულია ბრაუზერის მიერ HTML დოკუმენტში (DOM ხე) ელემენტების ჰიერქიაზე დაყრდნობით. თუ შვილეულ ელემენტს არ აქვს პირდაპირი მნიშვნელობა მემკვიდრეობით თვისებისთვის, ის იღებს მნიშვნელობას მისი ყველაზე ახლო წინაპრიდან, რომელსაც ეს თვისება აქვს განსაზღვრული.

/* მნიშვნელობა წითლად დაყენება */
body {
  color: red;
}

/* ყველა შვილეული ელემენტი, რომელსაც არ აქვს განსაზღვრული მნიშვნელობა color-ისთვის, იქნება წითელი */
p {
  /* ეს პარაგრაფი იქნება წითელი */
}

/* კონკრეტული ელემენტისთვის მნიშვნელობის გადაფარვა */
div {
  color: blue;
}

/* ამ div-ის შიგნით პარაგრაფი იქნება ლურჯი */
div p {
  /* ეს პარაგრაფი იქნება ლურჯი */
}

მემკვიდრეობის გამოყენებით, შესაძლებელია საერთო სტილების განსაზღვრა დიდი მასალის ბლოკებისთვის, რომლებიც ავტომატურად გადაეცემა შვილეულ ელემენტებს, თუ სხვა მითითება არ არის. ეს აუმჯობესებს კოდის შენარჩუნებას და წაკითხვადობას.