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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
unset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

  • initial を使用すると、プロパティを初期値に設定します。
  • inherit キーワードを使用すると、要素のプロパティを親と同じ値にします。
  • revert キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート(またはもしあれば、ユーザーのスタイル)で設定された値に初期化します。
  • revert-layer キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。
  • all プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。