CSS - unset

• トップ
• CSSリファレンス
• unset

説明

プロパティの値として unset を指定すると、font-size の様に継承するプロパティの場合は inherit、border の様に継承しないプロパティの場合は initial と同じ動作をします。all を含めたすべてのプロパティで指定可能です。一部の属性だけスタイル設定を外したい場合に利用されます。

類似の値に revert, inherit, unset がありますが、違いについて説明します。下記の状態であると仮定します。

• 仕様で決められた通常要素の font-size：medium (16px)
• ブラウザが h1 要素に対して適用している font-size：200% (32px)
• 親要素に設定している font-size： 14px

この時、それぞれ下記の様に設定されます。

使用例

下記の例では、親要素(parent)で、色、太字、サイズを指定しています。子要素A(childA)ではすべての属性をリセットしています。子要素B(childB)でもすべての属性をリセットしていますが、色だけは親要素の値を継承しています。

.parent {
  color: red;
  font-weight: bold;
  font-size: 16pt;
}
.childA {
  all: initial;
}
.childB {
  all: initial;
  color: unset;
}

<div class="parent">
 parent
 <div class="childA">childA</div>
 <div class="childB">childB</div>
</div>

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/unset
• https://w3c.github.io/csswg-drafts/css-cascade-4/#inherit-initial