X

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

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

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

「initial」が使える条件

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

「initial」の使い方

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

p{
color: red;
font-family: 'arial unicode ms';
}
<p>文字列1</p>

<p>文字列2</p>

<p>文字列3</p>

表示すると


文字列1

文字列2

文字列3


こうなります。

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

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

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

<p>文字列1</p>

<p>文字列2</p>

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


文字列1

文字列2

文字列3


こんな感じ。

ちなみに、


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

.init{
all: initial;
}

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

shirushiru: