CSSの無効化(初期化)の方法【現役エンジニアが解説】

PROGRAM

今回は、CSSの無効化(初期化)の方法について、継承がない場合と継承がある場合に分け、簡単に解説していきます。

initial

スタイルを無効化するには、プロパティの値をinitialにします。

initialの場合には、そのプロパティの初期値(もしくは既定値)になります。

p{
    color:initial;
}

上記のコードでは、p要素の文字色を初期値にすることによって黒色にしています。

unset(継承有)

プロパティの値がunsetの場合、親要素のプロパティから値を取得します。

親要素が存在しない場合は、初期値となり、initialと同様の働きとなります。

.hoge p{
    color:unset;
}

上記のコードでは、hogeのクラスの要素の中のp要素の文字色を親要素(classがhogeの要素)より継承させています。

inherit(継承目的)

プロパティの値をinheritにすると親要素からプロパティの値を取得します。

initialとunsetはInternet Explorerには対応していませんが、inheritは対応しています。

#hoge p{
    color:inherit;
}

上記のコードでは、hogeというidを持つ要素の下のp要素の文字色を親要素(idがhogeの要素)から継承させています。