CSS Group Selector

As you know, we can use a "class" or "id" to target a specific element so that some style can be applied to them. These are a particular type of CSS selectors that makes CSS styling distinct. But there is also another type of selector available that can use the collective elements for the style at the same time. In this chapter, you will learn about the Group Selector in CSS.

CSS Grouping Selector

As you have used the different CSS selectors that only target either a class or an ID or a single element for applying the styles. Nevertheless, CSS also allows making it incredibly easy for targeting more than one element at a time to allow for specific CSS properties and rules. To do this, you have to separate the names of the selector with a comma, and you are good to implement CSS styles on many elements.

This is one of the coolest features of CSS, that is meant for greater code re-usability as there is no ground for specifying the similar properties on some elements or classes separately when CSS has the possibility to re-use them.

CSS Grouping Selector Example

Often selectors use some similar styles, for example, using the same font-family. In these cases, instead of defining font-family one by one for every selector, you can group them, and thus can assign the same font-family to all selectors at once.

CSS Code snippet without group selector would look like this:

Example:
h1{
     font-family:Verdana,sans-serif;
}

h2{
     font-family:Verdana,sans-serif;
}

Now, after using the group selector, its format is as follows:

Example:
h1, h2{
     font-family:Verdana,sans-serif;
}

This is a basic example to explain how a group selector works. You can also use it with different types of selectors and can improve your understanding.

Advantages of Group Selectors

  • Same style definition implemented over multiple elements.
  • Code size gets minimized.
  • Commas are used to isolate every selector while grouping, hence it easily readable.

Scroll Back to Top