CSS Beginner tutorial 8 : Grouping and Nesting in CSS

Grouping :
By using Grouping, you can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas. For example, we need to assign same property to different selectors as follows.


h2 {
color: red;
}
.titleclass {
color: red;
}
.descclass {
color: red;
}


By using grouping, we can write them as


h2,  .titleclass , . .descclass  {
color: red;
}


Nesting :
In well structured CSS, there is no need to use many class or ID selectors. Because we can specify properties to selectors within other selectors. For example


#top {
background-color: #cccccc;
}
#top h2 {
color: #ff0;
}
#top p {
color: red;
}


It will remove the need for classes or ID's if it is applied to HTML that looks like as follows.


<div id="top">
<h2>Hello Word !</h2>
<p>This is a paragraph</p>
</div>


By separating selectors with spaces, It is saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red'.

See Also