inherit

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

inherit は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 all を含め、すべての CSS プロパティに適用することができます。

継承プロパティにおいては、既定の動作を推進するものであり、他のルールを上書きする場合にのみ必要です。

メモ: 親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます。

例

選択された要素をルールから除外

css
/* 第 2 レベルのヘッダーを緑色にする */
h2 {
  color: green;
}

/* サイドバーにあるものは、親の色を使用するようにする */
#sidebar h2 {
  color: inherit;
}

この例では、サイドバーの中の h2 要素の色が異なるかもしれません。例えば、ルールに一致する div の子要素を考えてみましょう。

css
div#current {
  color: blue;
}

こうすると、青になります。

仕様書

Specification
CSS Cascading and Inheritance Level 4
# inherit

ブラウザーの互換性

関連情報

  • 継承
  • initial を使用すると、プロパティを初期値に設定します。
  • revert キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。
  • revert-layer キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。
  • unset キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
  • all プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。