Grouping in CSS

Grouping CSS selectors allows you to put the same styles on many different elements without repeating the styles in your style sheet. This means that your style sheet will be smaller and download more quickly.

How to Group CSS Selectors

Separate multiple grouped selectors in the style property by commas. In this example the style will affect the p and div elements:

p, div { color: #f00; }

Any form of selector can be grouped with any other selector. In this example, a class selector is grouped with an ID selector:

p.red, #sub { color: #f00; }

And you can group any number of selectors together. In this example, I've grouped four different selectors:

p, .red, #sub, div a:link { color: #f00; }

Any Selector Can be Grouped

As you can see from the above examples, any valid selector can be placed in a group. And all elements in the document that match all the grouped elements will have the same style based on that style property.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Hemant Kumar15y ago
Grouping CSS selectors allows you to put the same styles on many different elements without repeating the styles in your style sheet. This means that your style sheet will be smaller and download more quickly.
How to Group CSS Selectors

Separate multiple grouped selectors in the style property by commas. In this example the style will affect the p and div elements:
```
p, div { color: #f00; }
```
Any form of selector can be grouped with any other selector. In this example, a class selector is grouped with an ID selector:
```
p.red, #sub { color: #f00; }
```
And you can group any number of selectors together. In this example, I've grouped four different selectors:
```
p, .red, #sub, div a:link { color: #f00; }
```
Any Selector Can be Grouped
As you can see from the above examples, any valid selector can be placed in a group. And all elements in the document that match all the grouped elements will have the same style based on that style property.