Cascading Style Sheets unset keyword.
unset は CSSのキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。
unset はあらゆる CSSプロパティに対して、一括指定の all を含み、適用することができます。
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 となりました。