unset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
unset
は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit
キーワードのように動作し、後者の非継承プロパティの場合は initial
キーワードのように動作します。
unset
は一括指定の all
を含む、あらゆる CSS プロパティに対して適用することができます。
例
色
color
は継承プロパティです。
HTML
html
<p>このテキストは赤です。</p>
<div class="foo">
<p>このテキストも赤です。</p>
</div>
<div class="bar">
<p>このテキストは緑色(既定の継承値)です。</p>
</div>
CSS
css
.foo {
color: blue;
}
.bar {
color: green;
}
p {
color: red;
}
.bar p {
color: unset;
}
結果
境界線
border
は非継承プロパティです。
HTML
html
<p>このテキストには赤い境界線があります。</p>
<div>
<p>このテキストには赤い境界線があります。</p>
</div>
<div class="bar">
<p>このテキストには黒い境界線があります(既定値、継承なし)。</p>
</div>
CSS
css
div {
border: 1px solid green;
}
p {
border: 1px solid red;
}
.bar p {
border-color: unset;
}
結果
仕様書
Specification |
---|
CSS Cascading and Inheritance Level 4 # inherit-initial |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
initial
を使用すると、プロパティを初期値に設定します。inherit
キーワードを使用すると、要素のプロパティを親と同じ値にします。revert
キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート(またはもしあれば、ユーザーのスタイル)で設定された値に初期化します。revert-layer
キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。all
プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。