Group Selectors in CSS

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

This defined style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.

You can combine the various id selectors together as shown below:

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Updated on: 30-Jan-2020

406 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements