CSS tutorial 9. CSS Grouping and Nesting Grouping and

Grouping Group
When many selectors have the same attributes, you can use commas to combine them.
Example:

The code is as follows:	Copy code
H2 { Color: red; } . ThisOtherClass { Color: red; } . YetAnotherClass { Color: red; }

The above code can be written as follows:

The code is as follows:	Copy code
H2,. thisOtherClass,. yetAnotherClass { Color: red; }

Nesting
If the CSS structure is good, you do not need to use many class or ID selectors. This is because CSS can set the selector attribute in the selector.
Example:

The code is as follows:	Copy code
# Top { Background-color: # ccc; Padding: 1em } # Top h1 { Color: # ff0; } # Top p { Color: red; Font-weight: bold; }

If you encounter the following form, remember to process the class or ID on your webpage.

The code is as follows:	Copy code
<Div id = "top"> <H1> Chocolate curry <P> This is my recipe for making curry purely with chocolate </p> <P> Mmm mmmmm </p> </Div>

This is because, by using the space separation selector, we can set the h1 color in IDtop to # ff0, p to red and blod.
This may be complicated, because nesting can be used at multiple levels, so more exercises are required.