CSSLayerBlockRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2022⁩.

TheCSSLayerBlockRule represents a@layer block rule.

Instance properties

Inherits properties from its ancestorsCSSGroupingRule andCSSRule.

CSSLayerBlockRule.nameRead only: A string containing the name of the associated cascade layer.

Instance methods

Inherits methods from its ancestorsCSSGroupingRule andCSSRule.

Examples

HTML

html

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

CSS

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 pageconst layer = rules[0]; // A CSSLayerBlockRuleitem.textContent = `The CSSLayerBlockRule is for the "${layer.name}" layer`;