w3resource

Grouping of CSS selectors

 

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



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/css/selectors/grouping-of-CSS-selectors.php