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
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
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics