CSS Grouping and Nesting
Grouping
The same properties can be given to a number of selectors and you don’t need to repeat them, just separate the selectors by commas.
For example, if you have something like the following:
h2 {
color: red;
}.thisOtherClass {
color: red;
}.yetAnotherClass {
color: red;
}
You could turn it:
h2, .thisOtherClass, .yetAnotherClass {
color: red;
}
Nesting
In case the CSS is structured well, you don’t need to use many class and ID selectors. You can just specify properties to selectors within other selectors.
For example:
#top {
background-color: #ccc;
padding: 1em
}#top h1 {
color: #ff0;
}#top p {
color: red;
font-weight: bold;
}
Removes the need for ID’s or classes if it is applied to HTML that can look like this:
<div id=”top”>
<h1>Brazil Changes Your Life</h1>
<p>How I spend my holiday in this hot country</p>
<p>Great! Unbelievable! Impressive! Fabulous!</p>
</div>
When you separate selectors with spaces, you are saying h1 inside ID top is colour #ff0′ and ‘p inside ID top is red and bold’. Such things require some practice because it can go for more than two levels.