Group Selector in CSS

This article is about group selector in CSS. It is very useful for you to reduce the code and save time in CSS.

What is a selector?

selector
{ Declaration list; }

It means selecting an HTML element and styling it in CSS. If you want to style an HTML element, instead of using the style attribute, you can use a selector method in the CSS file. If you want to give a lot of style to an element, you should use a CSS selector instead of a Style attribute. Because giving too much style in StyleAttribute can cause confusion. You can select your HTML element in three categories namely class selector, id selector, and element selector.

• You can select by giving the HTML element name in the element selector.
• In the class selector, you must use the class attribute in your HTML element and specify the class name. Then you can select the HTML element with the Classselector by placing a dot in the CSS and giving the class name of your HTML element (.classname).
• And in the ID selector, you must also give IDname using the ID attribute to your HTML element. Use the hash # instead of the dot as in the class selector and give the ID name of your HTML element

After selecting the HTML element using the CSS selector, you need to enclose your declaration list in flower brackets.

What is a group selector and what are their types?

selector1, selector2,..
{ 
  Declaration list;
}

A group selector is a way to select multiple HTML elements in CSS and give the same style to everything. To implement a group selector, we write a comma-separated list of selectors. Create a group selector to reduce code redundancy when different tags have similar styles. If you don’t put a comma in the group selector, then the inside element will be selected instead of other elements. For example, if you put a p tag inside a Div element, then only that p tag will be selected. There are three types of group selectors:

1. Element group selector
2. Class group selector
3. ID group selector

Element group selector

CSS:

p, h3{
background-color: grey;
color: black;
}

HTML:

<p>This is Paragraph number 1 </p>
<h3>This is Sub-Heading number 1 </h3>

Output:

If you have two tags H3 and p tag, now both of them have similar styles. You can observe the code above, the both of them have background-color: grey and foreground color. Instead of writing separate rule sets, you can simply write one rule set containing the common rules. Then you should use in place of selector comma separated group selector. You have done h3, p and automatically the CSS applies all these styles to all h3 and paragraphs. So, the comma-separated list of selectors is known as group selectors.

If you want the same style for all elements then you can use the Element selector, not the element group selector. ex: You can make every element bold by using the element selector to select all p elements and give style font-weight: bold

Class group selector

CSS:

.p1, .head1{
  text-decoration: underline;
  color: darkblue;
}

HTML:

<p class="p1">This is Paragraph number 1 </p>
<h3 class="head1">This is Sub-Heading number 1 </h3>

Output:

A Group class selector is like a normal class selector, but in this case, there is some confusion by giving dot and comma. You will give a dot to specify class and a comma to separate group class selector, so the dot and a comma should be checked properly. In the above CSS code, p1 is an <p> element class name and head1 is an H3 element classname, so I will give a dot to specify the class and a comma to separate the group selector.

ID group selector

CSS:

#p1, #head1{ 
 font-family: sans-serif; 
 color: darkviolet; 
}

HTML:

<p id="p1">This is Paragraph number 1 </p>
<h3 id="head1">This is Sub-Heading number 1 </h3>

Output:

In this method, you will give hash (#) to specify the ID and a comma to separate the group ID selector. You should never reuse the same ID name in HTML, so minimize the use of the ID selector and use the ID only where it matters.

Conclusion

I hope this article helps you understand how to use Group selector. Any other queries about group selectors ask in the comment box.