There may be a situation where we want to apply same CSS styles to multiple elements on a page. Now, one way to do this is, select each of these elements using any selector individually and apply the styles. But, this will result in the repetition of code and need more effort and time.
The grouping selector can help in such situations. The grouping selector groups these selectors together and applies the same set of CSS styles to each of them in just a single declaration.
To group multiple selectors using the grouping selector, separate each of them using a comma(,).
In the example below, the grouping selector applies same styles to each of the <h1>, <h2>, and <p> elements.
Example:
h1, h2, p{
background: yellow;
border: 2px solid blue;
padding: 5px;
}
You can combine any type of CSS selector using the grouping selector, for example: id selector, class selector, element selector, etc.
In the example below, we have combined the red and blue class using the grouping selector.
Example:
.red, .blue{
text-align: center;
background: yellow;
padding: 5px;
border: 1px solid blue;
}
CSS Grouping Selector Syntax
The grouping selector has the below syntax:
selector1, selector2,...{
CSS styles
}
Related Pages
CSS Tutorial: CSS Selectors
