CSS - Group Selectors


CSS - Group Selectors

  • You can give the same properties to a number of selectors without having to repeat them.
  • We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group:

Example :

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

Sample Coding :

<!DOCTYPE html> 
<html>
<head>
<style>
    h1, h2, p  {
        	text-align: center;
color: red;
} </style> </head> <body> <h1>Welcome to Wikitechy!</h1> <h2> Find solution for All technology Errors </h2> <p> Execute the code in wikitechy.</p> </body> </html>

Code Explanation :


  We are grouping h1, h2 and p using grouping selector and applying set of style attributes for them.

  Using text-align property with value as center will display the heading tags (h1 and h2) and paragraph text contents to the center of the web page.

   In CSS, color property is used to apply color for the font of the text. Here we have given red color for the h1, h2 and p tag.

Output :


  The text “Welcome to Wikitechy!” is aligned center of the web page and appears in red color which is displayed in the browser window. 

  Similarly, the h2 heading text “Find solution for All technology Errors” is center aligned and displayed in red color. 

 The paragraph text ”Execute the code in wikitechy” appear in red color and center aligned which is displayed in the browser window.