【CSS】スタイルの継承
CSSのスタイルの継承についてご紹介します。
スタイルの継承
一部のプロパティはセレクターで指定する要素の子孫要素にも継承して適用されます。
次の例をご覧ください。
<style>
section {
color: red;
}
</style>
<section>
<h1>CSSとは</h1>
<div>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
</div>
</section>section要素にスタイルを適用していますが、その子孫要素であるh1要素とp要素にも適用されています。
継承するかどうかはプロパティによって異なりますので、使用する際に確認してください。
継承の制御
継承するかどうかプロパティ値で制御することができます。
制御の種類はinherit,initial,revert,revert-layer,unsetの５つあります。
ここでは一般的に使われるinherit,initial,unsetについてご紹介します
inherit
inheritは継承を有効にします。
<style>
div {
color: red;
}
h1 {
color: inherit;
}
</style>
<div>
<h1>CSS : Cascading Style Sheets</h1>
</div>initial
initialはプロパティの初期値に設定します。
<style>
div {
color: red;
}
h1 {
color: initial;
}
</style>
<div>
<h1>CSS : Cascading Style Sheets</h1>
</div>unset
unsetは継承動作を初期に設定します。継承される場合は継承し、そうでない場合は初期値に設定します。
<style>
div {
color: red;
}
h1 {
color: unset;
}
</style>
<div>
<h1>CSS : Cascading Style Sheets</h1>
</div>
