Grouping of CSS selectors

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

If more than one CSS selectors have same CSS declarations, they can be grouped together.

syntax:

selector1, selector2, selector3,.................................. selectorN {property : value; .......... }

Where, selector1, ......... selectorN are different selectors. Notice that here selectors are separated with ","combinators.

Example of Grouping of CSS selectors

CSS code:

h1,h2,h3 {
color: darkred; /* color of h1 h2 h3 should be darkred */ 
font-variant: small-caps; /* h1 h2 h3 should be in small caps */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of Grouping of CSS selectors</title>
<link rel='stylesheet' href='CSS-grouping-of-selectors-simple-example.css' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h1>
<h2>Example of CSS selector.</h2> 
<h3>Example of grouping of CSS selectors.</h3> 
</body>
</html>

View this simple example of Grouping of CSS selectors in a separate browser window.

Advanced Example of Grouping of CSS selectors

In this example, it is shown that if you are grouping a selector which is within another selector, with some more selectors, then mention the full name ( i.e. name of both of the selectors ) of the selector, for the selector residing within another one.

CSS code:

#w3r p, h1 h2 h3  {
color: darkred; /* color of p within w3r id and h1 h2 h3 should be darkred */
font-variant: small-caps; /*p within w3r id and h1 h2 h3 should be in small caps */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of Grouping of CSS selectors</title>
<link rel='stylesheet' href='CSS-grouping-of-selectors-advanced-example.css' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h1>. 
<h2>Example of CSS selector.</h2>
<h3>Example of grouping of CSS selectors.</h3>
<div id="w3r">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
</div>
</body>
</html>

Result:

Example of CSS.

Example of CSS selector.

Example of a grouping of CSS selectors.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.

View this advanced example of Grouping of CSS selectors in a separate browser window.

Previous: CSS selectors
Next: CSS universal selectors