CSS Grouping Selector

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

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.