CSSLayerBlockRule: name property
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
The read-only name
property of the CSSLayerBlockRule
interface represents the name of the associated cascade layer.
Value
A string containing the name of the layer, or ""
if the layer is anonymous.
Examples
HTML
html
<output></output> <output></output>
CSS
css
output {
display: block;
}
@layer special {
div {
color: rebeccapurple;
}
}
@layer {
div {
color: black;
}
}
JavaScript
js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
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 layer = rules[1]; // A CSSLayerBlockRule
const anonymous = rules[2]; // An anonymous CSSLayerBlockRule
item1.textContent = `The first CSSLayerBlockRule defines the "${layer.name}" layer.`;
item2.textContent = `A second CSSLayerBlockRule defines a layer with the following name: "${anonymous.name}".`;
Result
Specifications
Specification |
---|
CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |
Browser compatibility
BCD tables only load in the browser
See also
- The statement declaration of an
@layer
is represented by aCSSLayerStatementRule
. - How to create named cascade layers in CSS.