CSSLayerStatementRule: nameList property

{{APIRef("CSSOM")}}

The read-only nameList property of the {{DOMxRef("CSSLayerStatementRule")}} interface return the list of associated cascade layer names. The names can't be modified.

Value

An {{jsxref("Array")}} of strings, each representing a cascade layer represented by the {{cssxref("@layer")}} statement rule.

Examples

HTML

<div></div>

CSS

@layer layerName, layerName2;

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

JavaScript

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: ${layer.nameList.join(
  ", ",
)}.`;

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{DOMXRef("CSSLayerBlockRule.name")}}
• {{CSSXref("@layer")}}
• The @layer statement at-rule for named layers