اگر برای ویژگی یک عنصر به جای مقدار از کلمه کلیدی inherit استفاده شود, آن ویژگی مقدار محاسبه شده همان ویژگی مربوط به پدر عنصر را خواهد گرفت.

 

همه ویژگی های CSS می توانند از کلمه کلیدی inherit برای به ارث بردن مقدار از پدر یا اجداد عنصر استفاده کنند.

ادامه مطلب

 

به عنوان نمونه در مثال زیر عرض عنصر پدر را برای عنصر فرزند نیز تعیین می کنیم:

 

.dad {  
  width: 300px;
}

.child {
  width: inherit; /* = 300px */
}

 

خیلی از ویژگی ها در حالت پیشفرض به طور خودکار مقدارشان را از اجداد عنصر به ارث می برند و این کار به دلیل مفهموم وراثت که در ذات سی اس اس است اتفاق می افتد. اما اگر نیاز بود که قدرت ارث بری را بالا ببریم یا به بیان دیگر ویژگی را مجبور به ارث بری کنیم تا تحت هر شرایطی حتما مقدار را ارث ببرد می توانیم از کلمه کلیدی inherit استفاده کنیم.

یکی از مواردی که در اکثر مواقع نیاز داریم ویژگی را مجبور به ارث بری کنیم در مورد فونت عناصر input و یا button می باشد.

فرض کنید برای body فونتی به نام tahoma تعریف کرده ایم. بنا بر مفاهیم پایه ای سی اس اس باید عنصر button هم همان فونت را داشته باشد. اما اینطور نیست.

اتفاقی که می افتد این است که فونت tahoma به این عنصر ارث می رسد اما استایلی که مربوط به عامل کاربر است آن را دوباره نویسی می کند و به مقدار دیگری که مرورگر در نظر گرفته است تبدیل می کند.

برای جلوگیری از این کار باید به این صورت عمل کنیم:

 

button {
  font-family: inherit;
}

 

در دموی زیر می توانید این قضیه را تحقیق کنید:

 

 

توجه داشته باشید زمانی که از مدل مختصر نویسی برای ویژگی ها استفاده می کنیم نمی توانیم فقط برای قسمتی از مقدار از inherit استفاده کنیم بلکه این کلمه کلیدی همیشه برای کل مقادیر استفاده می شود:

 

.dad {
  border: 1px solid red;
}

.child {
  border: 2px solid inherit; /* غلط است */
  border: inherit; /* 1px solid red */
}

 

اگر واقعا به همچین چیزی نیاز دارید می توانید بصورت زیر عمل کنید:

 

.dad {
  border: 1px solid red;
}

.child {
  border-width: 2px;
  border-style: solid;
  border-color: inherit; /* red */
}