CSSの無効化(初期化)の方法【現役エンジニアが解説】
今回は、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の要素)から継承させています。