CSS の unset キーワードはプロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の場合は inherit キーワード、後者の場合は initial キーワードのようになります。あらゆる 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 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 の定義
勧告候補 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応41 あり27 なし あり9.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり27 あり9.3 あり

関連情報

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli, YuichiNukiyama
最終更新者: mfuji09,