CSS
継承

構文

• プロパティ：継承。

自動継承

継承要素のいくつかのプロパティの計算された値がその子に適用されるCSSの基本的なメカニズムです。これは、マークアップ内のすべての要素に前記のプロパティを設定するのではなく、グローバルスタイルを要素に設定する場合に特に便利です。

自動的に継承される一般的なプロパティは、 font 、 color 、 text-align 、 line-heightです。

次のスタイルシートを想定します。

#myContainer {
  color: red;
  padding: 5px;
}

これは<div>要素だけでなく、 <h3> <p>要素と<p>要素にもcolor: redを適用します。ただし、 paddingの性質上、その値はその要素に継承されません 。

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

強制的な継承

一部のプロパティは、要素からその子要素に自動的に継承されません。これは、これらのプロパティが、プロパティが適用される要素（または要素の選択）に対して一意であることが通常望ましいためです。一般的なこのようなプロパティは、 margin 、 padding 、 background 、 displayなどです。

しかし、とにかく継承が望まれることもあります。これを実現するために、 inherit必要があるプロパティにinherit値を適用できます。 inherit値は、 任意の CSSプロパティと任意の HTML要素に適用できます。

次のスタイルシートを想定します。

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

これは、 colorプロパティの継承性質のために、 <h3> <p>要素と<p>要素の両方にcolor: redを適用します。ただし、 <p>要素は指定されているため、その親からのpadding値も継承します。

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>