CSSScopeRule

{{ APIRef("CSSOM") }}

The CSSScopeRule interface of the CSS Object Model represents a CSS {{CSSxRef("@scope")}} at-rule.

{{InheritanceDiagram}}

Instance properties

Inherits properties from its ancestors {{domxref("CSSGroupingRule")}} and {{domxref("CSSRule")}}.

• {{domxref("CSSScopeRule.end", "end")}}
  • : Returns a string containing the value of the @scope at-rule's scope limit.
• {{domxref("CSSScopeRule.start", "start")}}
  • : Returns a string containing the value of the @scope at-rule's scope root.

Instance methods

Inherits methods from its ancestors {{domxref("CSSGroupingRule")}} and {{domxref("CSSRule")}}.

Examples

Accessing @scope information in JavaScript

Assuming the following is the only stylesheet attached to a document:

@scope (.outer) to (.inner) {
  :scope {
    background: yellow;
  }
}

The following JavaScript could be used to access information about the contained @scope block:

const scopeBlock = document.styleSheets[0].cssRules[0];

console.log(scopeBlock.start); // Returns ".outer"
console.log(scopeBlock.end); // Returns ".inner"

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{CSSxRef("@scope")}}
• {{CSSxRef(":scope")}}