How can we group selectors?

Experience Level: Junior
Tags: CSS

Answer

If you have multiple selectors with the same style definition, you can save some space and merge all the styles to one. If you do this, you will get the following advantages:

  • Shorter code: The resulting code will be shorter and more readable.
  • Faster to download: Downloading the shorter web page will be faster and it will consume less bandwidth. Mobile users will appreciate this.
  • Easier to maintain: The styles will be easier to maintain. In case some change needs to be done to the style definition, it can be done on just one place. Without the selector grouping it would be necessary to do the change on many places.
Example
h1 {
font-weight: bold;
}

h2 {
    font-weight: bold;
}

h3 {
font-weight: bold;
}
Can be merged to
h1, h2, h3 {
  font-weight: bold;
}
Related CSS job interview questions
CSS for beginners
CSS for beginners

Are you learning CSS? Try our test we designed to help you progress faster.

Test yourself