Grouping Selector in CSS

Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. The CSS is used to style properties on a single ID name, class name or a single element. The grouping selector uses element names with the comma in the style tag of the css files. We can use multiple properties and their values for the grouping selector.

Syntax

The following syntax shows the grouping selector in css.

Description:

• The selector can be elements, class name, and id name of the elements.
• The comma works as a separator for two elements of the group selector.
• We can select the id, class, and element names in the same pattern or use mixed to refer to the HTML elements.

Examples

The following examples display the grouping selector for the css properties.

Example 1:

The example shows the basic grouping selector in CSS with an attractive style. We can use all the elements of the div tag.

Output:

Example 2:

The example shows the basic grouping selector in CSS with an attractive style. We can use the elements with the class name.

Output:

The following output shows the group selector for the style.

Example 3:

The example shows the grouping selector in the not selector using CSS. We can use the multiple elements in the not tag and the CSS properties.

Output:

The following image shows the grouping selector for the not selector.

Example 4:

The following example uses the grouping selector with the page's id and class name simultaneously.

Output:

The following output shows the group selector for the style.

Conclusion

The grouping selector is a required and important factor for multiple web pages with different elements.