プロパティの値として inherit を指定することで、通常は継承しないプロパティであっても、親要素のプロパティ値を継承することができます。all を含めたすべてのプロパティで指定可能です。
形式 | 属性名: inherit |
---|---|
サポート | https://caniuse.com/mdn-css_types_global_keywords_inherit |
類似の値に revert, initial, unset がありますが、違いについて説明します。下記の状態であると仮定します。
この時、それぞれ下記の様に設定されます。
initial | 仕様で決められた通常要素の値。16px |
---|---|
revert | ブラウザが h1 要素に対して適用している値。32px |
inherit | 親要素に設定している値。14px |
unset | font-size のように継承するプロパティの場合は inherit と同じ。 border-color のように継承しないプロパティの場合は initial と同じ。 |
.parent { font-size: 14px; } .initial { font-size: initial; } .revert { font-size: revert; } .inherit { font-size: inherit; } .unset { font-size: unset; }
<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>