CSSLayerBlockRule

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

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

CSS

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

JavaScript

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