Scope proximity

As explained in CSS in Depth, Second Edition

Scope proximity is the cascade criterion based on how close a scoped style is to the element it targets in the DOM.

Scope proximity is a cascade criterion for resolving conflicts between scoped rules. When nested scopes target the same element with equal specificity, the nearest scope—the inner scope—wins. Proximity is considered before source order. section 9.3.1

When declarations conflict, apply the relevant cascade criteria in this order:

• Compare selector specificity first; a more specific selector still wins over a less specific selector. section 9.3.1
• If specificity is equal, prefer the declaration from the scope closest to the targeted element in the DOM. section 9.3.1
• Use source order only after scope proximity fails to distinguish the declarations. section 9.3.1

A nested media module

A highlight-block scope colors its headings blue, while a nested media scope also styles its h4 heading. Because both rules target the Strength heading with equal specificity, the inner media scope wins and keeps the heading dark gray. Wrapping the media module in highlight-block makes the DOM relationship that determines the result visible. section 9.3.1

Figure 9.7 Scope proximity is considered after selector specificity but before source order.

Use the cascade flow chart to locate scope proximity between selector specificity and source order. section 9.3.1

How CSS in Depth, Second Edition covers it

How deep it goes

Explains specificity, nested scopes, DOM distance, and source-order timing through a worked module example.

Examples

Uses nested highlight-block and media modules competing to style an h4 heading.

What it assumes

Assumes the cascade and selector specificity while explaining how scoped styles add DOM proximity to conflict resolution.

What you can do after

Evaluate which equal-specificity scoped declaration wins by comparing scope nesting before source order.

How it connects

Connects scope proximity with the cascade, selector specificity, source order, CSS layers, and modular CSS.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• cascadeused by · The CSS cascade is the process that resolves competing applicable style declarations to determine the styles applied to an element.
• CSS source ordercontrasts with · CSS source order is the relative ordering of declarations that determines which declaration prevails when competing declarations have equal cascade precedence.
• CSS scopepart of · CSS scope is a language feature that limits style rules to elements within a specified region of a document.
• scoping limitalternative to · A CSS scoping limit is a boundary that restricts the descendants to which a scoped style can apply, including the lower-bound selector in an @scope rule.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.