This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
What I wanted to achieve is that I override the .navbar style without using the !important keyword.
I just learned about @layer and as far as I understand the order of the layers matter. I have two layers:
@layer custom, framework;
@import url(https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css)
layer(framework);
@layer custom {
.navbar {
background-color: red;
}
}
I use the custom layer first and then the framework layer. I expected the custom layer to overrule the framework layer, but the background does not get red. Am I using it wrong or am I missing something here?
Your custom layer CSS is being applied correctly on the navbar here, but it is overridden by the background color set from the
bg-lightclass asbg-lightis defined after thenavbarclass in the HTML, meaning that the CSS for.bg-lightwill be applied after the CSS for.navbarhas been applied (see attached image for reference). Removing the bg-light class will set the background color to red as defined in your custom layer, since it is the last layer defined and in case of multiple styles for the same element being defined in different layers, the last layer containing the style for that element gets the most priority.For more information on the layer at-rule, you can refer to this :