【CSS】スタイルの継承

CSSのスタイルの継承について解説します。

検証環境

CSS

macOS

14.1

スタイルの継承

一部のプロパティは適用した要素の子孫要素にも継承（引き継ぎ）します。

例えば、次のサンプルではsection要素に適用したcolorが子孫要素のh1要素、p要素にも適用されています。

sample.html

<style>
section {
    color: red;
}
</style>

<section>
    <h1>CSSとは</h1>
    <div>
        <p>CSSの正式名称はCascading Style Sheetsです。</p>
    </div>
</section>

プレビュー

継承の可否はプロパティによって異なりますので、都度確認が必要です。

継承の制御

継承の可否はプロパティ値で制御できます。

制御の種類は種類があり、代表的なモノはinherit,initial,unsetです。

inherit

inheritは継承を有効にします。

sample.html

<style>
div {
    color: red;
}
h1 {
    ___ih_hl_start
    color: inherit;
    ___ih_hl_end
}
</style>

<div>
    <h1>CSS : Cascading Style Sheets</h1>
</div>

プレビュー

initial

initialは継承を無効にし、初期値に設定します。

sample.html

<style>
div {
    color: red;
}
h1 {
    ___ih_hl_start
    color: initial;
    ___ih_hl_end
}
</style>

<div>
    <h1>CSS : Cascading Style Sheets</h1>
</div>

プレビュー

unset

unsetは継承動作を初期状態に設定します。

継承する場合は継承し、そうでない場合は初期値に設定します。

sample.html

<style>
div {
    color: red;
}
h1 {
    ___ih_hl_start
    color: unset;
    ___ih_hl_end
}
</style>

<div>
    <h1>CSS : Cascading Style Sheets</h1>
</div>

プレビュー