To apply the same CSS styles to more than 1 HTML elements tags, you can separate various HTML element tags selectors by using the , (comma character) in CSS.
For example, let's consider 2 p (paragraph) HTML element tags with one having class selector and the other having an id selector like this,
<!-- Paragraph tags -->
<p class="myParagrapgh">Hello World!</p>
<p id="myCoolPragraph">Hello Devs!</p>
Now to apply a text color of red to both the paragraph tags with different selectors, we can write those selectors separated by the , (comma) character inside the CSS stylesheet like this,
/*
Apply text color of red to both paragraphs
having different selectors.
The selectors are separated by comma characters.
*/
.myParagrapgh,
#myCoolPragraph {
color: red;
}
This will set the text color of both paragraphs to red. Like this, you can apply one style to many HTML element tag selectors separated by the comma character.
These are called the grouping selectors.
See the above code live in JSBin.
That's all 😃!
