このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <div> <div> <p> この段落はフォントサイズが 1.5rem で、色は金色です。また、ユーザーエージェントによって 1rem の縦マージンが設定されています。この段落の親要素は、青い破線の境界線を持つ <div> です。 </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 プロパティの一括指定です。
構文
/* グローバル値 */all: initial;all: inherit;all: unset;all: revert;all: revert-layer;all プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値はunicode-bidi およびdirection プロパティには影響しません。
値
initialその要素のすべてのプロパティを初期値に変更するべきであることを指定します。
inheritその要素のすべてのプロパティを継承値に変更するべきであることを指定します。
unsetその要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。
revert宣言が所属するスタイルシートの出所に応じて動作を指定します。
revert-layerその要素のすべてのプロパティを、直前のカスケードレイヤーが存在すれば、そこまでカスケードをロールバックすることを指定します。 他にカスケードレイヤーが存在しない場合、要素のプロパティは、現在のレイヤーに一致するルールが存在する場合はそのルール、または直前のスタイルオリジンにロールバックします。
公式定義
| 初期値 | 具体的な初期値なし。 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | この一括指定が対象とする各プロパティに適用する指定された値のまま。 |
| アニメーションの種類 | この一括指定のそれぞれのプロパティとして (unicode-bidi とdirection) を除いたすべてのプロパティ |
形式文法
all =
initial|
inherit|
unset|
revert|
revert-layer|
revert-rule
例
この例では、 CSS ファイルには親要素である<body> 要素のスタイル設定に加えて、<blockquote> 要素のスタイル設定が格納されています。結果節の様々な出力は、<blockquote> 要素のスタイル設定がblockquote ルール内のall プロパティに様々な値が適用されたときに、どのように影響されるかを示しています。
HTML
<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.CSS
body { font-size: small; background-color: #f0f0f0; color: blue; margin: 0; padding: 0;}blockquote { background-color: skyblue; color: red;}結果
A.all プロパティなし
<blockquote> 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> 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> 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> 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> 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> 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 |
ブラウザーの互換性
関連情報
CSS のグローバルキーワード値:initial,inherit,unset,revert,revert-layer