CSSLayerStatementRule: nameList property

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.

The read-only nameList property of the CSSLayerStatementRule interface return the list of associated cascade layer names. The names can't be modified.

Value

A Array of strings, each representing a cascade layer represented by the @layer statement rule.

Examples

HTML

html
<div></div>

CSS

css
@layer layerName, layerName2;

@layer layerName3 {
  div {
    font-family: serif;
  }
}

JavaScript

js
const item = document.getElementsByTagName("div")[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 layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.

item.textContent = `@layer declares the following layers: ${layer.nameList.join(
  ", ",
)}.`;

Specifications

Specification
CSS Cascading and Inheritance Level 5
# dom-csslayerstatementrule-namelist

Browser compatibility

BCD tables only load in the browser

See also