CSS GROUPING SELECTORS
A CSS Grouping Selector lets you apply the same CSS styles to multiple elements by separating the selectors with commas (,). This avoids repeating the same code.
Syntax
selector1, selector2, selector3 { property: value; }
Example
h1, h2, p { color: blue; font-family: Arial, sans-serif; }
In this example:
-
All
<h1>elements will have blue text. -
All
<h2>elements will have blue text. -
All
<p>elements will also have blue text. - All three will use the Arial font.
HTML Example
<h1>Welcome</h1> <h2>About Us</h2> <p>This is a paragraph.</p>
Benefits
- Reduces repetitive CSS code.
- Makes stylesheets cleaner and easier to maintain.
- Ensures consistent styling across multiple elements.
Output: The <h1>, <h2>, and <p> elements will all display with blue text and use the Arial font.
No comments