CSS スタイルを初期値に戻す方法 initial

Webデザイン入門オンライン講座 Udemy

「複数のページで基本的には同じスタイルなんだけど、このページのこの要素だけはそのスタイルを当てたくない」みたいなときに出くわすことがあります。初期状態のスタイルに戻したいようなイメージです。

そのときのおまじないが、「initial」です。

「initial」が使える条件

「initial」は、CSS3から登場しました。
ブラウザの対応状況はこんなかんじ。Can I use で調べる

「initial」の使い方

例えばこんなcssとhtmlがあったとして。

p{
color: red;
font-family: 'arial unicode ms';
}

<p>文字列１</p>

<p>文字列２</p>

<p>文字列３</p>

表示すると

文字列１

文字列２

文字列３

こうなります。

では、３番目だけ初期値に戻してみましょう。
3番目に「initial」を適用するclass名をつけてあげると、

p{
color: red;
font-family: 'arial unicode ms';
}

.init{
color: initial;
font-family: initial;
}

<p>文字列１</p>

<p>文字列２</p>

<p class="init">文字列３</p>

文字列１

文字列２

文字列３

こんな感じ。

ちなみに、

p{
color: red;
font-family: 'sans-serif';
}

.init{
all: initial;
}

っていう指定もできます。この場合「all」なので、スタイルが適用されている全ての要素にたいして、「initial」してあげるという意味になります。