Selector Grouping

Suppose you want both the h2 element and the paragraph to be gray. To achieve this, the easiest thing to do is to use the following declaration:

h2, p {color:gray;}

Combine the h2 and p selectors Place it to the left of the rule and separate it with commas to define a rule. The style to the right (color:gray;) will be applied to the elements referenced by these two selectors. The comma tells the browser that the rule contains two different selectors. Without this comma, the meaning of the rule would be completely different. See descendant selector.

You can group any number of selectors together without any restrictions.

For example, if you want to make many elements gray, you can use a rule similar to the following:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Tip: By grouping, authors can "compress" certain types of styles together, resulting in a more concise style sheet.

The following two sets of rules achieve the same result, but it's clear which one is easier to write:

/* no grouping */

h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}

/* grouping */

h1, h2, h3, h4, h5, h6 {color:blue;}

Example:

      
  
集体声明h1
 
集体声明h2
 
集体声明h3
 
集体声明h4
 
集体声明h5
 
集体声明p1
 
集体声明p2
 
集体声明p3
  

Nested selector

Summary of usage rules:

1. id nested class #myid.myclass:

.
2. One element tag uses multiple classes. .important.warning

Be careful not to include spaces. There are spaces to indicate that they are applicable to two classes respectively.
3. The class element within the id tag. #myid .myclass

4. The class under the element tag. p .myclass

4. The id under the element tag. p #myid

5. Element tag under class. .myclass span

dd

6. The id tag within the id tag #myid #myid2 . The usage of id is similar to that of element tags.
7. .myclass1 .myclass2 means that two classes use the same style instead of nesting. Classes can also be nested within classes. But if there is no space between the two .myclasses, it means that you have both classes
8. Element tag nested element tag p span

Example:

      
  
 
Chocolate curry
 
This is my recipe for making curry purely with chocolate
 
Mmm mm mmmmm