CSS

Cascading Style Sheets unset keyword.

unset

 unset は CSSのキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。

 unset はあらゆる CSSプロパティに対して、一括指定の all を含み、適用することができます。

Example of use

Before setting unset

このテキストは赤です。

このテキストも赤です。

このテキストは緑色 (既定の継承値) にしたいです。

HTML source


<p>このテキストは赤です。</p>
<div class="foo">
	<p>このテキストも赤です。</p>
</div>
<div class="bar">
	<p>このテキストは緑色 (既定の継承値) にしたいです。</p>
</div>

CSS source


.foo {
	color: blue;
}

.bar {
	color: green;
}

p {
	color: red;
}

 先に foo のクラスに対して文字色を blue に、bar のクラスに対して文字色を green に設定しましたが、その子要素である p要素に対して文字色を red に設定しているため、全部の文字列が red になっています。

After setting unset

このテキストは赤です。

このテキストも赤です。

このテキストは緑色 (既定の継承値) です。

HTML source


<p>このテキストは赤です。</p>
<div class="foo">
	<p>このテキストも赤です。</p>
</div>
<div class="bar">
	<p>このテキストは緑色 (既定の継承値) です。</p>
</div>

CSS source


.foo {
	color: blue;
}

.bar {
	color: green;
}

p {
	color: red;
}

.bar p {
	color: unset;
}

 そこで、bar クラスの p要素に対して unset キーワードを指定してすることで、文字色 red の設定がリセットされ、親要素にあたる div に設定してた文字色 green を継承するため、文字色が green となりました。