CSS Inheritance

Inheritance को family trait की तरह सोचें जो generations में आगे बढ़ता है: parent की eye color अपने आप children में दिख जाती है, किसी को उसे दोबारा declare नहीं करना पड़ता। लेकिन parent का घर अपने आप children का नहीं हो जाता -- कुछ चीज़ें मुफ़्त में आगे बढ़ती हैं, बाकी नहीं। CSS inheritance भी वैसे ही काम करती है। कुछ properties बिना दोबारा बताए parent से child elements तक flow करती हैं, बाकी parent पर ही रुक जाती हैं।

In this page:

कौन-सी Properties Default रूप से Inherit होती हैं
कौन-सी Properties Inherit नहीं होतीं
inherit Keyword
initial Keyword
unset Keyword

Syntax

css

selector {
  property: inherit;
  property: initial;
  property: unset;
}

कौन-सी Properties Default रूप से Inherit होती हैं

color, font-family, font-size, और line-height जैसी text-related properties default रूप से inherit होती हैं -- इन्हें किसी parent पर set करें और हर nested element इन्हें ले लेता है जब तक वह उन्हें override न करे। यही वजह है कि body पर एक global font set करना बिना हर paragraph और span पर दोहराए काम कर जाता है।

Note:

Accepted values:
inherit — parent की computed value लेता है
initial — spec की default पर reset करता है
unset — inheritable हो तो inherit करता है, वरना initial
revert — browser की default style पर वापस जाता है
revert-layer — पिछले cascade layer पर वापस जाता है

उदाहरण: Which Properties Inherit by Default

css

<style>
body {
  color: navy;
  font-family: sans-serif;
}
</style>
<body>
  <p>Inherits navy color and the font-family without repeating them</p>
</body>

कौन-सी Properties Inherit नहीं होतीं

border, margin, padding, width, और background जैसी box-model properties inherit NAHI होतीं -- हर element अपने खुद के default box के साथ fresh शुरू होता है, वरना हर nested div गलती से अपने parent की border और padding inherit कर लेता।

यह default खासतौर पर इसलिए मौजूद है ताकि layout properties हर element पर predictable रहें।

उदाहरण: Which Properties Don't Inherit

css

<style>
.parent {
  border: 2px solid black;
  padding: 20px;
  background: lightyellow;
}
</style>
<div class="parent">
  <div>Child has no border or padding of its own</div>
</div>

inherit Keyword

कोई भी property, यहाँ तक कि वे भी जो default रूप से inherit नहीं होतीं, को inherit keyword का इस्तेमाल करके अपने parent की computed value लेने के लिए force किया जा सकता है। यह तब उपयोगी है जब आप चाहते हैं कि कोई child जानबूझकर अपने container से match करे, property की normal initial value पर fall back करने के बजाय।

उदाहरण: The inherit Keyword

css

<style>
.parent {
  border-color: blue;
  background: lightyellow;
  padding: 10px;
}
.child {
  border: 2px solid black;
  border-color: inherit;
  padding: 8px;
  background: white;
}
</style>
<div class="parent">
  <div class="child">Border forced to match the parent's border-color</div>
</div>

initial Keyword

initial keyword किसी property को CSS specification में defined उसकी default value पर reset कर देता है, inheritance और किसी भी stylesheet rule दोनों को नज़रअंदाज़ करते हुए। यह किसी inherited या cascaded value को browser के baseline पर वापस undo करने के लिए काम का है।

उदाहरण: The initial Keyword

css

<style>
p {
  color: red;
}
.reset {
  color: initial;
}
</style>
<p class="reset">Reset back to the browser's default text color</p>

unset Keyword

unset keyword context-sensitive है: जो property normally inherit होती है उस पर, यह inherit की तरह behave करता है; जो property inherit नहीं होती उस पर, यह initial की तरह behave करता है। यह किसी property को reset करने के लिए एक सुविधाजनक single keyword है, बिना यह जाने कि उसका inheritance behavior क्या है।

उदाहरण: The unset Keyword

css

<style>
.parent {
  color: navy;
}
.child-color {
  color: unset;
}
.child-border {
  border: 2px solid black;
  border-color: unset;
  background: lightyellow;
  padding: 8px;
}
</style>
<div class="parent">
  <p class="child-color">unset acts like inherit here</p>
  <div class="child-border">unset acts like initial here</div>
</div>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Errors Next Lesson → CSS Colors