css initial inherit の違い

cssの設定で何かを初期化したい時にinitialプロパティがありますが、似たような名前のプロパティでinheritがあります。

このinheritってそういえばなんぞやと思ったので調べました。

inheritは訳すと「受け継ぐ」という意味で、調べてみてやっと納得した次第でこざいます。

<div>
  <p>テスト</p>
</div>

というDOMがあった場合

div {
  color: red;
}

とするとpタグで囲まれてるテストという文字は赤色になります。

これはdivに設定されたcolorがpタグに継承されて色が変わっています。

テストという文字を赤色にしたくない場合は

p {
  color: initial;
}

にすれば継承がなくなり、赤色ではなくなります。

もともと継承がされないプロパティもあるので、逆に継承をさせたい場合はinheritを指定してあげると、親に設定されたスタイルを継承する事ができます。