Compare Grouping and Nesting in CSS ?

Rojalin Patra · 02nd Mar 2018 .

Amaresh Satapathy · 02nd Mar 2018 .

Grouping: Selectors can be grouped having the same values of property and the code be reduced.

E.g.

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

It can be seen from the code that every element shares the same property. Rewriting can be avoided by writing each selector separated by a comma.

Nesting: Specifying a selector within a selector is called nesting.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}