CSS Nested Styling Rules: Improving and Simplifying Your CSS Code
The CSS Nesting & Grouping features are used to make Coding more exact and efficient. By using these methods, you can cut down on code and increase readability and page load speeds.
This feature allows style rules to be nestled inside other style rules, developers can build more modular, readable, and maintainable CSS code. We will go into the realm of CSS nesting in this blog, looking at its advantages, restrictions, and useful uses.
An Understanding of CSS Nested Styling Rules
The ability to create rules for CSS inside other rules, mirroring the basic structure of your HTML, is known as CSS nesting. Especially for complicated projects, this function helps create designs that are easier to understand and maintain.
In other words, One style rule can be nested inside another using the syntax defined by the CSS nesting module. The child rule’s selector is positioned about the parent rule’s selector.
Syntax:
class1_, class2_, and id_selector {
property: value;
}Example:
parent_class child_class grandchild_class{
/*CSS Code*/
background-color: red;
border: 2px solid black;
}
How to Approach:
- To separate the id and class selectors, select them both and add a space.
- For each element, add its style properties.
NOTE*: When describing the nesting sequence, be precise.
Importance of CSS Nested:
- CSS nesting improves the readability, maintainability, and modularity of CSS stylesheets.
- It might also contribute to CSS file size reduction, which would lessen the quantity of data consumers download.
- It also follows current CSS rules, minimizes duplication by avoiding multiple parent selectors, and is compatible and easy to migrate between preprocessors such as Sass and Less.
Additionally, it encourages scalability, which makes managing intricate stylesheets in big projects easier.
Limitations of CSS Nested:
Despite CSS nesting’s strength, there are a few things to keep in mind. For example, an element selector cannot be nestled right inside another selector. Rather, the parent selector must be referenced using the & symbol. If nesting is not done carefully, it can also result in problems with specificity.
Features of CSS Nested:
- Readability and Organization: By visually grouping relevant styles, nested rules facilitate simpler reading and maintenance of stylesheets.
- Scoping: By limiting the scope of styles to particular parts or components, nested rules help lower the possibility of inadvertent style leaking.
- Inheritance: Code that is clearer and more meaningful is produced by child selectors inheriting their parent’s context.
CSS Nested Styling Rules’ Examples
Example 1: The <a> and <th> tags will be nested inside the <p> and <tr> tags, respectively, in this example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS NESTED</title>
<style>
p a {
color: red;
}
table tr th {
background-color: pink;
font-size: 20px;
}
table tr td{
background-color: lightblue;
text-align: center;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>
This is a paragraph element that contains a <a href="https://codershot.com/">link</a>.
</p>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Shyam</td>
<td>20</td>
</tr>
<tr>
<td>Mayank</td>
<td>22</td>
</tr>
<tr>
<td>Vikrant</td>
<td>28</td>
</tr>
<tr>
<td>karan</td>
<td>19</td>
</tr>
<tr>
<td>Rishabh</td>
<td>26</td>
</tr>
</table>
</body>
</html>Output:
Example 2: Card Grid Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS NESTED</title>
<style>
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
.cards {
border: 2px solid #ccc;
padding: 20px;
border-radius: 6px;
background-color: whitesmoke;
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
}
.card-des {
font-size: 2em;
color: #666;
}
&:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}
}
</style>
</head>
<body>
<div class="card-grid">
<div class="cards">
<h3 class="card-title">Card 1</h3>
<p class="card-des">Card 1 description.</p>
</div>
<div class="cards">
<h3 class="card-title">Card 2</h3>
<p class="card-des">Card 2 description.</p>
</div>
</div>
</body>
</html>Output:
Example 3: Product listing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS NESTED</title>
<style>
.product-page{
border: 4px solid aliceblue;
border-radius: 10px;
padding: 15px;
text-align: center;
transition: box-shadow 0.1s ease;
.product-image {
width: 15%;
height: auto;
border-radius: 10px;
}
.product-title {
font-size: 1.5em;
margin: 10px 0;
}
.product-price {
font-size: 1.2em;
color: #28a745;
margin: 5px 0;
}
.add-to-cart{
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
&:hover {
background-color: #0056b3;
}
}
&:hover {
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}
}
.Buy-now{
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
&:hover {
background-color: #0056b3;
}
}
&:hover {
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="product-page">
<img src="dog.jpg" alt="Product Image" class="product-image" />
<h3 class="product-title">Dog</h3>
<p class="product-price">$39.99</p>
<button class="add-to-cart">Add to Cart</button>
<button class="Buy-now">Buy Now</button>
</div>
</body>
</html>Output:
Browser Supported:
As of 2024, the majority of popular browsers support CSS nesting:
Chrome: Version 120 and later have full support.
Edge: Complete support starting with version 120.
Safari: Complete support starting with version 17.2.
Firefox: Complete support starting with version 117.
Opera: Complete support starting with version 106.
To guarantee compatibility, it is still advised to verify particular browser versions and settings, particularly for older or less widely used browsers.
READ ALSO: LEARN MORE ABOUT CSS BACKGROUNDS
