Group Selectors in CSS

JavascriptWeb DevelopmentFront End Scripts

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 07:57:12