CSS Grouping Selector

There may be a situation when we want to apply same CSS styles to multiple elements. 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