Group-Selector
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: