A Brief Analysis of CSS Selector Grouping

Selector Grouping

Suppose you want both the h2 element and the paragraph to be gray. The easiest way to do this is to use the following statement:

h2, p {color:gray;}

A rule is defined by placing the h2 and p selectors on the left side of the rule, separated by commas. The style to the right (color:gray;) will be applied to the elements referenced by both 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 Selectors.

You can group as many selectors as you want together without any restriction.

For example, if you want to gray out a lot of elements, you could use a rule like this:

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

Tip: Grouping allows authors to "compress" certain types of styles together, which can result 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;}

Grouping offers some interesting options. For example, all of the following rule groupings are equivalent; each group simply demonstrates a different way to group 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;}

Wildcard Selector

CSS2 introduced a new simple selector - the universal selector, which appears as an asterisk (*). This selector matches any element, just like a wildcard.

For example, the following rule would make every element in a document red:

* {color:red;}
<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a <b>normal</b> paragraph of text. </p>
</body>
</html>

This declaration is equivalent to a grouping selector that lists all elements in the document. Using the wildcard selector, you can specify the color attribute value of red for all elements in the document with just one keystroke (just an asterisk).

Declaration Grouping

We can group both selectors and declarations.

Suppose you want all h1 elements to have a red background and blue text using the Verdana font that is 28 pixels high, you could write the following style:

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

However, the above approach is not very efficient. This can be cumbersome especially when we have to create such a list for an element that has multiple styles. Instead, we can group declarations together:

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

This has exactly the same effect as the previous 3-line style sheet.

Note that it is important to use a semicolon at the end of each statement to group them. Browsers ignore whitespace in style sheets. As long as you include the semicolon, you can create styles in the following formats without any problems:

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

How about it? Is the above writing more readable?

However, if the second semicolon is omitted, the user agent interprets the style sheet as follows:

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

Because background is not a legal value for color, and because only one keyword can be specified for color, the user agent ignores the color declaration entirely (including the background: black part). This way the h1 heading will only appear blue without the red background, but it's more likely that you won't get a blue h1 at all. Instead, these headers will just appear in a default color (usually black) with no background color at all. font: 28px Verdana The declaration still works fine because it does correctly end with a semicolon.

Like selector grouping, declaration grouping is a convenient way to shorten your stylesheets, making them clearer and easier to maintain.

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

Combining selectors and declarations with grouping

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

The following rule specifies a complex style for all headings:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Combining selectors and declarations with grouping

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

The following rule specifies a complex style for all headings:

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

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

Combining selectors and declarations with grouping

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

The following rule specifies a complex style for all headings:

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

Summarize

The above is the CSS selector grouping that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: JavaScript ES6 Module Detailed Explanation

>>: In-depth discussion on auto-increment primary keys in MySQL