unset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年3月.
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 |
ブラウザーの互換性
Loading…
関連情報
initialを使用すると、プロパティを初期値に設定します。inheritキーワードを使用すると、要素のプロパティを親と同じ値にします。revertキーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。revert-layerキーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。allプロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。