トップページの中の CSSの基本の中の inherit値

inherit値

  • 最終更新:2009年6月29日 12:26

CSSのあらゆるプロパティには、inheritという値を指定できます。
この値は、通常では継承しない親要素のプロパティでも強制的に継承させる事ができます。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8対応
  • Firefox3対応
  • Opera9.6対応
  • Safari4対応
  • Chrome2対応

inherit値を使ったサンプル

div.mainArea {
  padding: 10px;
  border: 1px solid #999;
}

div.mainArea * {
  border: inherit;
  padding: inherit;
}

div.mainArea strong {
  margin: 0 3px;
  padding: 2px;
}
<div class="mainArea">

<div class="item">
<p>全ての要素にボーダーが<strong>継承</strong>されます。</p>
<p>全ての要素にボーダーが<strong>継承</strong>されます。</p>
</div>

</div>

通常borderプロパティは子要素に継承する事がありませんが、値にinheritを指定する事で強制的にすべての要素に継承させています。
(ユニバーサルセレクタを使って全ての要素に継承させているので、タイプセレクタなどで特定の要素のみ継承させる事も勿論可能です)

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

全ての要素にボーダーが継承されます。

全ての要素にボーダーが継承されます。

なんだかボーダーだらけになっているのが確認できるかと思います。
上手く使えば指定を減らす事が出来たり中々便利に使えるのですが、IE6, 7が対応していないため現状では実用するのは難しいかもしれません。

このページの上部へ