CSS Selector Grouping

Selector Grouping

Suppose you want both the h2 element and the paragraphs to be gray. The easiest way to achieve this is to use the following declaration:

h2, p {color:gray;}

Place the h2 and p selectors on the left side of the rule, then separate them with a comma, and you define a rule. The style on the right (color:gray;) will be applied to the elements referenced by these 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.

Any number of selectors can be grouped together, there are no restrictions on this.

For example, if you want to display many elements in gray, you can use a rule like the following:

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

Tip:By grouping, creators can 'compress' certain types of styles together, thus obtaining a more concise stylesheet.

The following two groups of rules can achieve the same result, but it can be clearly seen 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;}

Try It Yourself

Grouping provides some interesting choices. For example, all the rule groups in the following example are equivalent, each group just shows a different method of grouping selectors and declarations:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

Try it yourself:

Please note that 'declaration grouping' is used in group 3. We will introduce 'declaration grouping' later.

Wildcard selector

CSS2 introduced a new simple selector - the universal selector (universal selector), represented by an asterisk (*). This selector can match any element, just like a wildcard.

For example, the following rule can make each element in the document red:

* {color:red;}

Try It Yourself

This declaration is equivalent to listing a group selector for all elements in the document. By using a universal selector, you can specify the 'color' property value for all elements in the document with just one keystroke (a single asterisk).

Declaration grouping

We can group selectors as well as declarations.

Suppose you want all h1 elements to have a red background and display blue text using 28-pixel-high Verdana font, you can write the following style:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

However, this method is not very efficient. Especially when creating such a list for an element with multiple styles, it can be麻烦. Instead, we can group the declarations together:

h1 {font: 28px Verdana; color: white; background: black;}

This has the same effect as the previous 3 lines of the stylesheet.

Note that it is very important to group declarations by using a semicolon at the end of each declaration. Browsers will ignore whitespace in the stylesheet. As long as a semicolon is added, you can freely use the following format to establish styles:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Try It Yourself

How about, isn't the readability of this writing style stronger?

However, if the second semicolon is ignored, the user agent will interpret the stylesheet as follows:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Try It Yourself

Because 'background' is not a valid value for 'color', and since only one keyword can be specified for 'color', the user agent will completely ignore this color declaration (including 'background: black'). As a result, the h1 title will only display in blue, without a red background, and it is more likely that the h1 will not even get the blue color. On the contrary, these titles will only display in the default color (usually black) and there will be no background color. The 'font: 28px Verdana' declaration still works properly because it indeed ends with a semicolon.

Like selector grouping, declaration grouping is also a convenient method that can shorten the style sheet, making it clearer and easier to maintain.

Tip:It is a good habit to also add a semicolon after the last declaration in a rule. When adding another declaration to the rule, you don't have to worry about forgetting to insert a semicolon.

Combining Selector and Declaration Grouping

We can combine selector grouping and declaration grouping in a rule to define relatively complex styles with a few statements.

The following rule specifies a complex style for all titles:

h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Try It Yourself

The following rule defines the style of all titles with gray text on a white background, with a padding of 10 pixels, and a 1-pixel solid border, with the text font as Verdana.