CSSLayerBlockRule

Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

The CSSLayerBlockRule represents a @layer block rule. It is a grouping at-rule meaning that it can contain other rules, and is associated to a given cascade layer, identified by its name.

CSSRule CSSGroupingRule CSSLayerBlockRule

Instance properties

Also inherits properties from its parent interface, CSSGroupingRule.

Instance methods

Inherits methods from its parent interface, CSSGroupingRule.

Examples

HTML

html

<p>I am displayed in <code>color: rebeccapurple</code>.</p>

CSS

css

@layer special {
  p {
    color: rebeccapurple;
  }
}

JavaScript

js

const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page

const layer = rules[0]; // A CSSLayerBlockRule

item.textContent = `The CSSLayerBlockRule is for the "${layer.name}" layer`;

Result

Specifications

Specification
CSS Cascading and Inheritance Level 5
# csslayerblockrule

Browser compatibility

BCD tables only load in the browser

See also