Loading

Group Selector

  • In CSS, a group selector allows you to apply the same styles to multiple selectors in a single CSS rule.
  • Group selectors are also known as compound selectors or multiple selectors.
  • It will avoid redundancy in your CSS code and apply styles consistently to multiple elements that share the same styles.
  • To create a group selector, you simply separate the individual selectors with commas.

Syntax:

selector1, selector2, selector3 {
   /* CSS properties and values */
}

 Without group selector:

h1 {  
    text-align: center;  
    color: blue;  
}  
h2 {  
    text-align: center;  
    color: blue;  
}  
p {  
    text-align: center;  
    color: blue;  
}  

Syntax:

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

 Example of CSS group selector:

<!DOCTYPE html>
<html>

<head>
	<style>
		h1,
		h2,
		p {
			text-align: center;
			color: blue;
		}
	</style>
</head>

<body>
	<h1>Hello Quipoin.com</h1>
	<h2>Hello Javatpoint.com (In smaller font)</h2>
	<p>This is a paragraph.</p>
</body>

</html>

Output: