親要素に指定されたスタイルの継承(inherit)

CSSは、文書構造の要素の親子関係の中で、親へ指定したスタイルが子へ継承されます。

継承されるかどうかはCSSのプロパティごとに定義され、当サイトのリファレンスでは 継承性という項目であらわしています。

継承の例を次に示します。

<style type="text/css">
<!--
p {font-size: large;}
strong {color: blue;}
-->
</style>

<p>継承<strong>します</strong></p>

この場合、子要素であるstrongもfont-size: largeが継承され大きな文字で表示されます。

例えば、背景色を指定するbackground-colorは、子要素へ継承されません。 次のような指定の場合、p要素のbackground-colorのデフォルトが透明であるため 親要素の背景色が見えていますが継承されているわけではありません。

<style type="text/css">
<!--
div {background-color: blue;}
p {background-color: red;}
-->
</style>

<div>
<p>継承していません</p>
</div>

明示的に継承する必要がある場合、次のように記述します。

background-color: inherit;