all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

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

試してみましょう

/* all プロパティなし */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        この段落はフォントサイズが 1.5rem で、色は金色です。また、ユーザーエージェントによって 1rem の縦マージンが設定されています。この段落の親要素は、青い破線の境界線を持つ &lt;div&gt; です。
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

構成要素のプロパティ

このプロパティは、unicode-bidi、direction、カスタムプロパティを除くすべての CSS プロパティの一括指定です。

構文

css

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

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

値

initial

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

inherit

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

unset

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

revert

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

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

revert-layer

その要素のすべてのプロパティを、直前のカスケードレイヤーが存在すれば、そこまでカスケードをロールバックすることを指定します。他にカスケードレイヤーが存在しない場合、要素のプロパティは、現在のレイヤーに一致するルールが存在する場合はそのルール、または直前のスタイルオリジンにロールバックします。

公式定義

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

形式文法

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

例

この例では、 CSS ファイルには親要素である <body> 要素のスタイル設定に加えて、 <blockquote> 要素のスタイル設定が格納されています。結果節の様々な出力は、 <blockquote> 要素のスタイル設定が blockquote ルール内の all プロパティに様々な値が適用されたときに、どのように影響されるかを示しています。

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;
}

結果

A. `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 プロパティが設定されていない場合のシナリオです。 <blockquote> 要素はブラウザーに既定値のスタイル設定を使用し、マージンを与え、スタイルシートを指定します。また、ブロック要素としても振る舞います。続くテキストはその下にあります。

B. `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;
  all: initial;
}

blockquote ルールで all プロパティを initial に設定すると、<blockquote> 要素はブラウザー既定のスタイル設定を使用しなくなります。これでインライン要素になり（初期値）、 background-color は transparent （初期値）に、 font-size は medium に、 color は black （初期値）になります。

C. `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;
  all: inherit;
}

この場合、 <blockquote> 要素はブラウザーの既定のスタイル設定を使用しません。これでブロック要素となり（継承値）、background-color は #F0F0F0 （継承値）、 font-size は small （継承値）、 color は blue （継承値）となります。

D. `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;
  all: unset;
}

blockquote ルールの all プロパティに unset 値を用いた場合、 <blockquote> 要素はブラウザー既定値のスタイル設定を使用しません。なぜなら、 background-color は継承されないプロパティであり、font-size と color は継承されるプロパティだからです、 <blockquote> 要素はこれでインライン要素（初期値）、 background-color は transparent （初期値）となりますが、 font-size は small （継承値）、 color は blue （継承値）のままです。

E. `all: revert`

<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;
  all: revert;
}

blockquote ルールの all プロパティに revert が設定されている場合、blockquote ルールは存在しないとみなされ、スタイル設定のプロパティ値は親要素 <body> に適用されている値が継承されます。つまり、 <blockquote> 要素はブロック要素となり、 background-color は #F0F0F0、font-size は small、color は blue でスタイル設定されます。これらはすべて body ルールから継承された値です。

F. `all: revert-layer`

<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;
  all: revert-layer;
}

この CSS ファイルにはカスケードレイヤーが定義されていないので、 <blockquote> 要素は対応する body ルールからスタイルを継承します。ここでの <blockquote> 要素はブロック要素としてスタイル設定されており、 background-color が F0F0F0 に、 font-size が small に、 color が blue に設定されます。 - すべて body ルールから継承された値です。このシナリオでは、all を revert-layer に設定しても、all を revert に設定した場合と同じ動作をします。

仕様書

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

all

A. all プロパティなし

B. all: initial

C. all: inherit

D. all: unset

E. all: revert

F. all: revert-layer