CSS Group Selector

❮ Prev Next: How to add CSS in HTML ❯

You have read in detail about css selectors in the previous tutorial, in this lesson you will learn about CSS group selector, if more than one selector have same property and value then write those selectors in group .

The properties and values of the declarations of all selectors in the selectors group are the same.

CSS selectors

There are several selectors whose declarations have the same properties and values.

CSS selectors example

h1 {
  color: green;
  text-align: center;
}

h2 {
  color: green;
  text-align: center;
}

p {
  color: green;
  text-align: center;
}

In this case, it is better to group the selectors to minimize the code.

Use commas (,) to separate selectors in groups.

Example of group selector

h1, h2, p {
color: green;
text-align: center;
}

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</p>
<p>This is a paragraph</p>

Result

This is heading 1
This is heading 2
This is a paragraph

We have grouped the element selectors here, in the same way ID selectors and class selectors can also be grouped.

Note

You will learn a lot about CSS selectors, declarations and CSS features in the next tutorials

❮ Prev Next: How to add CSS in HTML ❯