CSS Grouping and Nesting


CSS Grouping and Nesting to remember
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;


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:CSS Grouping and Nesting to learn more

<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>


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.

Comments are closed.