unset

unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。

unset はあらゆる CSS プロパティに対して、一括指定の all を含み、適用することができます。

HTML

<p>このテキストは赤です。</p>
<div class="foo">
  <p>このテキストも赤です。</p>
</div>
<div class="bar">
  <p>このテキストは緑色 (既定の継承値) です。</p>
</div>

CSS

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

結果

境界線

HTML

<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has a black border (initial default, not inherited).</p>
</div>

CSS

div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

結果

仕様書

仕様書 状態 備考
CSS Cascading and Inheritance Level 4
unset の定義
勧告候補 Level 3 から変更なし。
CSS Cascading and Inheritance Level 3
unset の定義
勧告候補 初回定義。

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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