Explain nesting and grouping in CSS

Last Updated : 31 Aug, 2021

The Nesting & Grouping concept is very important for a web developer to write precise codes. You can group and nest items to reduce the amount of code that you write, which will reduce the length of your code and allow pages to load faster. It is a way to simplify your code. With the help of Nesting and Grouping, we can be more specific in our code. In this article, we will see how nesting & grouping helps to optimize the code & make it efficient & increases readability.

Nesting: The nesting property in CSS facilitates nesting one style rule inside another, with the selector of the child rule that is relative to the selector of the parent rule. It helps to increase the modularity and maintainability of CSS stylesheets & hence increase the overall readability of the code. For instance, if you write a structured CSS module, instead of specifying the separate selectors for every HTML element ie, by using many classes or ID selectors, you can simply specify properties to selectors within other selectors. While nesting the CSS properties, HTML elements form a tree-structured shape. Nesting is a shortcut to create CSS rules for multiple selectors for a specific property. So, instead of rewriting the same set of properties for the different selectors, we can simply nest selectors inside other selectors. For this reason, we are not only reducing the size of the code but also reducing the overall loading time.

Syntax:

class1_selector class2_selector id_selector  {
  property: value;
}

Example:

table tr th {
  background-color: beige;
}

Approach:

Select the id/class selector & add a space to separate one from the other.
Add the style properties for the elements.

Note: Be specific with the order of nesting.

Example: In this example, we will nest the <a> tag inside the <p> tag and <th> tag inside the <tr> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        p a { 
            color: green; 
        } 
  
        table tr th { 
            background-color: beige; 
        } 
    </style> 
</head> 
  
<body> 
  
    <p> 
        This is a 
        <a href="https://ide.geeksforgeeks.org/">link</a> 
        within a paragraph element. 
    </p> 
  
    <table style="width: 100%"> 
        <tr> 
            <th>Name</th> 
            <th>Age</th> 
        </tr> 
        <tr> 
            <td>Ram</td> 
            <td>50</td> 
        </tr> 
        <tr> 
            <td>Rahul</td> 
            <td>65</td> 
        </tr> 
        <tr> 
            <td>Vikram</td> 
            <td>26</td> 
        </tr> 
    </table> 
</body> 
  
</html> 

Output: We got <a> tag as green color and <th> of beige color using nesting.

nesting

Grouping: Grouping is used to select the multiple elements together to apply the common styling properties to them. For this reason, it helps to reduce the length of the code that has multiple selectors with the same properties. This makes code easy to read. Page load times and development time for code are reduced as well when using grouping.

Instead of writing this long code, specifying the same properties to different selectors:

h1 {
  padding: 5px;
  color: grey;
}
p {
  padding: 5px;
  color: grey;
}

We can group them and write like this & we need the comma(,) to group the various selectors.

h1, p {
 padding: 5px;
 color: grey;
}

Approach:

Add <style>tag inside <head> tag.
Add various tags inside <body> tag with content.
Inside <style> tag, we can group our selectors containing the same properties.

Example: In this example, we will group various selectors together.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1, h2, p, a { 
            text-align: center; 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <h2>Smaller heading!</h2> 
  
    <p>This is 
        <a href="https://ide.geeksforgeeks.org/"> 
            anchor tag 
        </a> 
    </p> 
  
    <p>This is a paragraph.</p> 
</body> 
  
</html> 

Output:

grouped selectors with the same properties

Difference between Nesting & Grouping:

S.No.	Nesting	Grouping
1.	Nesting property facilitates nesting one style rule inside another, with the selector of the child rule that is relative to the selector of the parent rule.	Grouping property provides the same properties with values to a number of selectors at a time.
2.	It may help to simplify & manage the properties for the different elements at a time but It may be complicated if the number of nesting elements that contain the same properties, is increased. It may be difficult to manage such a nesting property.	It is simple to apply the properties to the number of different elements at a time & can be managed easily.
3.	In this case, if we need to modify the property for any specific element ie, either the parent element or child element in CSS, we need to change it manually for that specific element, if it is in nesting. For large-size code, it may be an inefficient way to manage the CSS properties.	There are no restrictions as such in the grouping.