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 の定義
勧告候補 初回定義。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
unsetChrome 完全対応 41Edge 完全対応 13Firefox 完全対応 27IE 未対応 なしOpera 完全対応 28Safari 完全対応 9.1WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 27Opera Android 完全対応 28Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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