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 の状態にします。