1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: Cascade
slug: Web/CSS/Cascade
translation_of: Web/CSS/Cascade
---
<p>{{ CSSRef() }}</p>
<p><span class="seoSummary">The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets.</span></p>
<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2>
<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like {{ cssxref("@font-face")}} containing <em>descriptors</em> don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered.</p>
<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p>
<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p>
<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:</p>
<ul>
<li>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li>
<li>The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.</li>
<li>The <em>reader</em>, the user of the browser, may have a custom style sheet to tailor its experience.</li>
</ul>
<p>Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.</p>
<h2 id="Cascading_order">Cascading order</h2>
<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
<ol>
<li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
<li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
<table class="standard-table">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">Origin</th>
<th scope="col">Importance</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user agent</td>
<td>normal</td>
</tr>
<tr>
<td>2</td>
<td>user agent</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>3</td>
<td>user</td>
<td>normal</td>
</tr>
<tr>
<td>4</td>
<td>author</td>
<td>normal</td>
</tr>
<tr>
<td>5</td>
<td>CSS Animations</td>
<td><em>see below</em></td>
</tr>
<tr>
<td>6</td>
<td>author</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>7</td>
<td>user</td>
<td><code>!important</code></td>
</tr>
</tbody>
</table>
</li>
<li>In case of equality, the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value is considered to choose one or the other.</li>
</ol>
<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single <code>@keyframes</code> and never mixes several of them.</p>
<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p>
<h2 id="Example">Example</h2>
<p><strong>User-agent CSS:</strong></p>
<pre class="brush:css;">li { margin-left: 10px }</pre>
<p><strong class="brush:css;">Author CSS 1:</strong></p>
<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
<p><strong class="brush:css;">Author CSS 2:</strong></p>
<pre class="brush:css;">@media screen {
li { margin-left: 3px }
}
@media print {
li { margin-left: 1px }
}
</pre>
<p><strong class="brush:css;">User CSS:</strong></p>
<pre class="brush:css;">.specific { margin-left: 1em }</pre>
<p><strong>HTML:</strong></p>
<pre class="brush:html;"><ul>
<li class="specific">1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>
</pre>
<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
<p>So three declarations are in competition:</p>
<pre class="brush:css;">margin-left: 0</pre>
<pre class="brush:css;">margin-left: 3px</pre>
<pre class="brush:css;">margin-left: 1px</pre>
<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p>
<pre class="brush:css;">margin-left: 3px</pre>
<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
<li>{{CSS_Key_Concepts()}}</li>
</ul>
|
