Nine Grouping and Nesting grouped and nested

Group

Grouping Group

When many selectors have the same properties, you can combine them with commas.

Example

h2 {color: red;}.thisOtherClass {color: red;}.yetAnotherClass {color: red;}

The above can be written like this:

h2, .thisOtherClass, .yetAnotherClass {color: red;}

Nesting nesting

If the CSS structure is good, you don't need to use many class or ID selectors. This is because CSS can set the selector's properties inside the selector.

Example:

#top {background-color: #ccc;padding: 1em}#top h1 {color: #ff0;}#top p {color: red;font-weight: bold;}

If you come across the form below, remember to dispose of the class or ID on your page.

<div id="top">Chocolate curry<p>This is my recipe for making curry purely with chocolate</p><p>Mmm mm mmmmm</p></div>

This is because, by using the space separator selector, we can set top the ID inside the h1 color #ff0 for, p Yes red and blod .

This can be complicated, because nesting can be used multilevel, so you need to practice more.

Here's a detailed introduction to IE7 's new supported selectors.