ContextQMD
Back to Content

CSSLayerBlockRule

files/en-us/web/api/csslayerblockrule/index.md

latest1.2 KB
Original Source

{{APIRef("CSSOM")}}

The CSSLayerBlockRule represents a {{cssxref("@layer")}} block rule.

{{InheritanceDiagram}}

Instance properties

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

  • {{DOMxRef("CSSLayerBlockRule.name")}} {{ReadOnlyInline}}
    • : A string containing the name of the associated cascade layer.

Instance methods

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

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.getElementById("css-output").sheet.cssRules;

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

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

Result

{{EmbedLiveSample("Examples")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also