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

by shirushiru · 公開 2017年4月15日 · 更新済み 2017年4月15日

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

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

「initial」が使える条件

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

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

1p{
2color: red;
3font-family: 'arial unicode ms';
4}

1<p>文字列１</p>
2 
3<p>文字列２</p>
4 
5<p>文字列３</p>

表示すると

文字列１

文字列２

文字列３

こうなります。

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

1p{
2color: red;
3font-family: 'arial unicode ms';
4}
5 
6.init{
7color: initial;
8font-family: initial;
9}

1<p>文字列１</p>
2 
3<p>文字列２</p>
4 
5<p class="init">文字列３</p>

文字列１

文字列２

文字列３

こんな感じ。

ちなみに、

1p{
2color: red;
3font-family: 'sans-serif';
4}
5 
6.init{
7all: initial;
8}

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