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

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

Examples

HTML

html

CSS

css
@layer layerName, layerName2;

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

JavaScript

js
const item = document.getElementsByTagName("div")[0];
const rules = document.getElementById("css-output").sheet.cssRules;

const layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.

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