How to use @layer rule to overcome cascading styles conflicts in CSS ?
Last Updated :
28 Apr, 2025
A cascade layer is declared using the @layer CSS at-rule, which can also be used to specify the hierarchy of precedence when there are multiple cascade layers. With this, web developers have more control over cascades as a result of rules that layer cascades together. Any styles that are not in a layer are collected and added to a single anonymous layer that follows all named and anonymous layers that have been declared. This implies that regardless of their level of specificity, any styles declared outside of a layer will take precedence over those declared inside.
Approach:
- In the HTML file, create a HTML div and add a paragraph tag with some text.
- In the CSS file, we will create the cascading layers using the @layer CSS at-rule.
Syntax:
Single layer: In this, "layer-name" is the name of a particular layer and rules are the list of the CSS rules for the layer.
@layer layer-name {rules}
Multiple layer: For defining multiple layers, we use the above syntax and their precedence is from left to right which means the highest precedence is to the right most layer.
@layer layer-name-1, layer-name-2, layer-name-3;
Example 1: Lets see an example of how anonymous layers precedence is greater than any defined layer.
- In the below example we have used a paragraph tag inside a div with class "gfg-container"
- In the CSS file we have written two styles for the paragraph, one inside the layer and one outside.
- The paragraph style defined outside the layer is of higher precedence than the layered item style of the paragraph, so even if we write the @layer rule below the paragraph style which is outside, it will take the styles of the outside or the anonymous layer which is formed.
- The layer paragraph styling are applied due to precedence order.
HTML Code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Layers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gfg-container">
<p>Welcome to Geeks For Geeks</p>
</div>
</body>
</html>
CSS Code: The following code is the "style.css" which is used above.
CSS
p {
color: green;
}
@layer gfgExample {
.gfg-container{
font-weight: bold;
font-size: 20px;
color: black;
background-color: grey;
}
}
Output:
@layer at-rule
Example 2: Let us see an example without any anonymous layers.
- Create a HTML file with a div containing a h1 tag with defining 2 layers.
- You will get an idea, that the layer name which was defined first has a precedence value less than the second, so the styles mentioned in the second layer would override the styles in the first which are common. The CSS color property was common, so the color mentioned in the second layer is applied and all the other styles of the first layer are also applied.
HTML Code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Layers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gfg-container">
<h1>Welcome to Geeks For Geeks</h1>
</div>
</body>
</html>
CSS Code:
CSS
@layer first, second;
@layer second{
.gfg-container h1 {
color: green;
}
}
@layer first {
.gfg-container h1 {
font-weight: bold;
font-size: 20px;
color: black;
border: 2px solid darkgreen;
}
}
Output:
@layer at-rule precedence order
Similar Reads
How CSS Styles Conflicts Between Selectors ? CSS conflicts between selectors occur when two or more selectors have conflicting styles applied to the same element, leading to unexpected results. In such cases, the browser has to decide which style to apply to the element. In this article, we'll understand what causes conflicting styles in CSS,
4 min read
How to override inline styles with external in CSS ? In this article, we are going to learn how we can override inline styles with external CSS. Generally, we use inline CSS to override all the other styles. In some circumstances, we have to do the opposite. We have to override the inline CSS which has come from foreign sources and cannot be removed.
3 min read
How to apply styles to multiple classes at once ? Applying styles to multiple classes at once means using a single CSS rule to style multiple elements that share different class names. This can be achieved by separating class selectors with commas, allowing for efficient styling of various elements without redundant code.Here we have some common ap
2 min read
How to use SASS to create new set of color styles in Bootstrap 4 ? By default, Bootstrap 4 provided all colors styles that are available as SASS variables and a SASS map in scss/_variables.scss file. In Further release, the ultra-new shade will be provided such as a grayscale palette. There are many color series defined in the SASS map which is looped to generates
5 min read
How to use @counter-style rule to customize list item using CSS ? In this article, we will see how the @counter-style rule can be used to customize each list item style in CSS. Most of the cases while developing web applications and web projects, we often make use of lists, i.e., an ordered list or unordered list, or a description list. Although, there exist some
3 min read
How to use @container Property in CSS ? The @container CSS at-rule is a conditional group rule that styles a container context. A condition filters style declarations, which are applied to the container if the condition is true. The condition is evaluated whenever the container size or <style-feature> value changes. Table of Content
2 min read