all

all は CSS の一括指定プロパティで、要素のすべてのプロパティを (unicode-bidi、direction、 CSS カスタムプロパティを除いて) 初期化します。プロパティは初期値または継承値、または他のスタイルシートに由来して指定した値に設定される可能性があります。

試してみましょう

構文

css

/* グローバル値 */
all: initial;
all: inherit;
all: revert;
all: unset;

all プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は unicode-bidi および direction プロパティには影響しません。

値

initial

その要素のすべてのプロパティを初期値に変更するべきであることを指定します。

inherit

その要素のすべてのプロパティを継承値に変更するべきであることを指定します。

unset

その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。

revert

宣言が所属するスタイルシートの出所に応じて動作を指定します。

ユーザーエージェントのスタイルシート: unset と同等です。
ユーザーのスタイル: カスケードをユーザーエージェントレベルまでロールバックし、指定値が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。
作成者のスタイル: カスケードをユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、指定値が計算されます。 revert の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。

公式定義

初期値	具体的な初期値なし。
適用対象	すべての要素
継承	なし
計算値	この一括指定が対象とする各プロパティに適用する指定された値のまま。
アニメーションの種類	この一括指定のそれぞれのプロパティとして (`unicode-bidi` と `direction`) を除いたすべてのプロパティ

形式文法

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

例

HTML

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

結果

`all` プロパティなし

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

<blockquote> は、特定の背景色と文字色と一緒に、ブラウザーの標準スタイルを使用します。これはブロック要素として動作します。これに続くテキストはその下に現れます。

`all:unset`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: unset;
}

<blockquote> はブラウザーの標準スタイルを使用しません。インライン要素 (初期値) となり、 background-color は transparent (初期値) ですが、 font-size は small (継承値) のままで、かつ color は blue (継承値) になります。

`all:initial`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: initial;
}

<blockquote> はブラウザーの標準スタイルを使用しません。インライン要素 (初期値) となり、background-color は transparent (初期値)、font-size は normal (初期値)、 color は black (初期値) になります。

`all:inherit`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: inherit;
}

<blockquote> はブラウザーの標準スタイルを使用しません。ブロック要素 (包含要素である <body> からの継承値)であり、 background-color は #F0F0F0 (継承値)、font-size は small (継承値) color は blue (継承値) です。

仕様書

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

ブラウザーの互換性

BCD tables only load in the browser

all プロパティなし

all:unset

all:initial

all:inherit

`all` プロパティなし

`all:unset`

`all:initial`

`all:inherit`