CSS - inherit

トップ > CSSリファレンス > inherit

説明

プロパティの値として inherit を指定することで、通常は継承しないプロパティであっても、親要素のプロパティ値を継承することができます。all を含めたすべてのプロパティで指定可能です。

形式属性名: inherit
サポートhttps://caniuse.com/mdn-css_types_global_keywords_inherit

類似の値に revert, initial, unset がありますが、違いについて説明します。下記の状態であると仮定します。

この時、それぞれ下記の様に設定されます。

initial仕様で決められた通常要素の値。16px
revertブラウザが h1 要素に対して適用している値。32px
inherit親要素に設定している値。14px
unsetfont-size のように継承するプロパティの場合は inherit と同じ。
border-color のように継承しないプロパティの場合は initial と同じ。

使用例

CSS
.parent {
  font-size: 14px;
}
.initial {
  font-size: initial;
}
.revert {
  font-size: revert;
}
.inherit {
  font-size: inherit;
}
.unset {
  font-size: unset;
}
HTML
<div class="parent">
  <h1 class="initial">Initial (16px)</h1>
  <h1 class="revert">Revert (32px)</h1>
  <h1 class="inherit">Inherit (14px)</h1>
  <h1 class="unset">Unset (14px)</h1>
</div>
表示

Initial (16px)

Revert (32px)

Inherit (14px)

Unset (14px)

関連項目

revert, inherit, unset

リンク


Copyright (C) 1997-2022 杜甫々
初版:1997年7月27日、最終更新:2022年9月18日
http://www.tohoho-web.com/css/value/inherit.htm