We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS の unset キーワードはプロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の場合は inherit キーワード、後者の場合は initial キーワードのようになります。あらゆる CSS プロパティ(一括指定の all を含む)に適用することができます。

HTML

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</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 は要素のプロパティを親と同じに設定するために使用します。

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

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