Title: CSS Cascading and Inheritance Level 6
Shortname: css-cascade
Level: 6
Status: ED
Prepare for TR: no
Work Status: Revising
Group: csswg
ED: https://drafts.csswg.org/css-cascade-6/
TR: https://www.w3.org/TR/css-cascade-6/
Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
Abstract: This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.
Abstract:
Abstract: New in this level is [[#scoped-styles]].
Ignored Terms: auto, flex items, 
Informative Classes: ex

spec:dom; type:dfn; text:shadow tree
spec:dom; type:dfn; for:tree; text:root
spec:css-color-4; type:property; text:color
spec:css-values-3; type: value; text:ex
spec:css-conditional-3; type:at-rule; text:@media
spec:mediaqueries-4; type:type; for:@media; text:all
spec:mediaqueries-4; type:type; text:
spec:selectors-4; type:dfn; text:subject
spec:html; type:element; text:style
spec:css-scoping-1; type:dfn; text:shadow host

spec:mediaqueries-5
spec:css-values-4
spec:css-fonts-4

Introduction and Missing Sections

Cascading

Cascade Sorting Order

Origin and Importance

The origin of a [=declaration=] is based on where it comes from and its importance is whether or not it is declared with ''!important'' (see [[#importance|below]]). The precedence of the various origins is, in descending order:

1. Transition declarations [[!css-transitions-1]]
2. [=Important=] [=user-agent origin|user agent=] declarations
3. [=Important=] [=user origin|user=] declarations
4. [=Important=] [=author origin|author=] declarations
5. Animation declarations [[!css-animations-1]]
6. [=Normal=] [=author origin|author=] declarations
7. [=Normal=] [=user origin|user=] declarations
8. [=Normal=] [=user-agent origin|user agent=] declarations

Declarations from origins earlier in this list win over declarations from later origins.

Context

A document language can provide for blending [=declarations=] sourced from different encapsulation contexts, such as the nested [=tree contexts=] of [=shadow trees=] in the [[!DOM]]. When comparing two declarations that are sourced from different [=encapsulation contexts=], then for [=normal=] rules the declaration from the outer context wins, and for [=important=] rules the declaration from the inner context wins. For this purpose, [[DOM]] [=tree contexts=] are considered to be nested in [=shadow-including tree order=]. Note: This effectively means that [=normal=] declarations belonging to an [=encapsulation context=] can set defaults that are easily overridden by the outer context, while [=important=] declarations belonging to an [=encapsulation context=] can enforce requirements that cannot be overridden by the outer context.

The Style Attribute

Separately for [=normal=] and [=important=] [=declarations=], declarations that are attached directly to an element (such as the contents of a style attribute) rather than indirectly mapped by means of a style rule selector take precedence over declarations the same [=importance=] that are mapped via style rule.

Layers

[=Declarations=] within each [=origin=] and [=context=] can be explicitly assigned to a [=cascade layer=]. For the purpose of this step, any declaration not assigned to an explicit layer is added to an implicit final layer. Cascade layers (like declarations) are sorted by order of appearance, see [[#layer-ordering]]. When comparing declarations that belong to different layers, then for [=normal=] rules the declaration whose [=cascade layer=] is latest in the layer order wins, and for [=important=] rules the declaration whose [=cascade layer=] is earliest wins. Note: This follows the same logic used for precedence of [=normal=] and [=important=] [=origins=], thus the ''!important'' flag maintains the same “override” purpose in both settings.

Specificity

The Selectors module [[!SELECT]] describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. The declaration with the highest specificity wins.

Scope Proximity

When comparing declarations that appear in style rules with different [=scoping roots=], then the declaration with the fewest generational or sibling-element hops between the [=scoping root=] and the [=scoped style rule=] [=subject=] wins. For this purpose, style rules without a [=scoping root=] are considered to have infinite proximity hops.

Order of Appearance

The last declaration in document order wins. For this purpose:

• Style sheets are ordered as in final CSS style sheets.
• Declarations from imported style sheets are ordered as if their style sheets were substituted in place of the ''@import'' rule.
• Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language.
• Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets. [[!CSSSTYLEATTR]]

Cascading Origins

Important Declarations: the ''!important'' annotation

Cascade Layers

Layer Ordering

Scoping Styles: the ''@scope'' rule

		@scope (.light-scheme) {
		  /* Only match links inside a light-scheme */
		  a { color: darkmagenta; }
		}

		@scope (.dark-scheme) {
		  /* Only match links inside a dark-scheme */
		  a { color: plum; }
		}

		@scope (.media-object) {
		  /* Only match author images inside a media-object */
		  .author-image { border-radius: 50%; }
		}
		

		@scope (.media-object) to (.content > *) {
		  img { border-radius: 50%; }
		  .content { padding: 1em; }
		}
		

Effects of ''@scope''

		@scope (#hero) {
		  img { border-radius: 50%; }
		}

		:where(#hero) img { border-radius: 50%; }
		

		<section data-scope="main-component">
		  <p data-scope="main-component">...<p>

		  <!-- sub-component root is in both scopes -->
		  <section data-scope="main-component sub-component">
		    <!-- children are only in the inner scope -->
		    <p data-scope="sub-component">...<p>
		  </section>
		</section>
		

		p[data-scope~='main-component'] { color: red; }
		p[data-scope~='sub-component'] { color: blue; }

		/* both sections are part of the outer scope */
		section[data-scope~='main-component'] { background: snow; }

		/* the inner section is also part of the inner scope */
		section[data-scope~='sub-component'] { color: ghostwhite; }
		

		<section data-scope="main-component">
		  <p>...<p>
		  <section data-scope="sub-component">
		    <p>...<p>
		  </section>
		</section>
		

		@scope ([data-scope='main-component']) to ([data-scope]) {
		  p { color: red; }

		  /* only the outer section is part of the outer scope */
		  section { background: snow; }
		}

		@scope ([data-scope='sub-component']) to ([data-scope]) {
		  p { color: blue; }

		  /* the inner section is only part of the inner scope */
		  section { color: ghostwhite; }
		}
		

		@scope ([data-scope='main-component']) to ([data-scope] > *) {
		  p { color: red; }

		  /* both sections are part of the outer scope */
		  section { background: snow; }
		}
		

	@scope [(<>)]? [to (<>)]? {
	  <>
	}
	

		@scope (#my-component) {
		  p { color: green; }
		  :scope p { color: green; }
		}
		

		@scope (#my-component) {
		  > p { color: green; }
		  :scope > p { color: green; }
		}
		

		@scope (#my-component) {
		  :scope { border: thin solid; }
		  & { border: thin solid; }

		  main :scope p { color: green; }
		  main & p { color: green; }
		}
		

		<div>
		  <style>
		    @scope {
		      p { color: red; }
		    }
		  </style>
		  <p>this is red</p>
		</div>
		<p>not red</p>
		

		<div id="foo">
		  <style>
		    @scope (#foo) {
		      p { color: red; }
		    }
		  </style>
		  <p>this is red</p>
		</div>
		<p>not red</p>
		

		/* .content is only a limit when it is a direct child of the :scope */
		@scope (.media-object) to (:scope > .content) { ... }
		

		/* .content is only a limit when the :scope is inside .sidebar */
		@scope (.media-object) to (.sidebar :scope .content) { ... }
		

		@scope (.parent-scope) {
		  @scope (:scope > .child-scope) to (:scope .limit) {
		    :scope .content {
		      color: red;
		    }
		  }
		}
		

		@scope (.parent-scope > .child-scope) to (.parent-scope > .child-scope .limit) {
		  .parent-scope > .child-scope .content {
		    color: red;
		  }
		}
		

	[Exposed=Window]
	interface CSSScopeRule : CSSGroupingRule {
	  readonly attribute CSSOMString? start;
	  readonly attribute CSSOMString? end;
	};