@layer
Groups styles into cascade layers: a later layer wins regardless of specificity.
Syntax
@layer name { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| @layer a, b; | order | Declares the layer order in advance; later layers are stronger. |
| @layer name { … } | block | Puts rules into a layer. |
Examples
A class in a later layer beats an id in an earlier one:
<style>
@layer base, components;
@layer components {
.btn { background: royalblue; color: white; }
}
@layer base {
button#save { background: lightgray; color: black; }
}
</style>
<button id="save" class="btn">The components layer wins despite the id</button>Notes
Declare the order of layers once at the top of the main CSS file. Styles outside any layer are stronger than all layers. For !important declarations the order is reversed. Supported in all current browsers since 2022.
See also
- !important — Makes a declaration win over all ordinary declarations, regardless of specificity.
- :where() — Works like `:is()`, but always has zero specificity.
- @import — Includes another CSS file into the current one.
- inherit, initial, unset, revert — Keywords that work in any property and reset it in different ways.
- @scope — Applies rules only inside a given element (the scope root), optionally stopping at an inner boundary.
In the tutorial
- Cascade layers: @layer — The @layer rule — how layers change the cascade, the order of layers, unlayered styles, putting files and third-party libraries into a layer.