Lesson Overview

As we learn more CSS, we'll also be learning more about how to make sure your CSS code is efficient, modular, and easy to maintain. When you have many different style rules that define a theme (such as a colour scheme), updating that CSS when the client decides they want a theme change can be tedious. One way to make it easier and faster it to group common styles for different selectors into a single rule.

Pre-Requisites

Make sure that you've worked through the previous tutorial, CSS Syntax, and that you're familiar with Class Selectors and ID Selectors before proceeding through this lesson.

Grouping Selectors

CSS can be inefficient if it's not coded correctly. We'll discuss later how CSS is processed and how styles are rendered in the browser, but we're going to start discussing ways to make your CSS more efficient now.

One thing you should do is ensure that you don't have repetitive code. For example, what if I wanted to style my headings like this:

h1 {
  border-bottom: 1px solid teal;
  color: teal;
  font-size: 1.7em;
  font-style: italic;
}

h2 {
  color: teal;
  font-size: 1.5em;
  font-style: italic;
}

h3 {
  color: teal;
  font-size: 1.3em;
  font-style: italic;
} 

The first-heading is styled to have a bottom border (it appears like an underline), teal coloured text, a font size 1.7 times the default font size for the page, and italic text. The second-level heading has teal coloured text, a font size 1.5 times the default page font size, and italic text. The third-level heading has teal coloured text, a font size 1.3 times the page font size, and italic text.

Which properties do all three headings share? They all have teal coloured text and they're all italicized. To make your CSS more efficient, we should define these common properties into a single rule that applies to all three headings, and then leave the heading-specific styles in each heading's type selector rule:

h1, 
h2, 
h3 {
  color: teal;
  font-style: italic;
}

h1 {
  border-bottom: 1px solid teal;
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.3em;
}

Notice that we put the text colour and the italic text styles into a single rule using the selector h1, h2, h3

The benefit of this technique is that it's much easier to make edits. If you have a specific background colour used on several elements, it's easier to set them all in a single rule. That way, it's easier to edit the background colour when your theme changes. For example:

header {
  background-color: cyan; 
  border: 1px solid cyan;
}

aside {
  background-color: cyan;
  border: 2px solid teal;
  margin: .5em;
  padding: .5em;
}

nav.support {
  background-color: cyan;
  border: 1px solid navy;
}

form {
  background-color: cyan;
  border: 2px solid teal;
  margin: .35em;
}

.error {
  color: red;
  border: 2px solid maroon;
}

table {
  border: 2px solid teal;
  border-collapse: collapse;
}

caption {
  background-color: cyan;
  font-weight: bold;
  padding: .25em;
}

th {
  background-color: cyan;
  border: 1px solid cyan;
}

td {
  border: 1px solid cyan;
}

footer {
  background-color: cyan;
  border: 2px solid teal;
  font-size: .9em;
}

If you wanted to change the colour scheme, you'd have to edit every single rule. Instead, you can make it easier by defining the background colour for each selector in a single rule:

header, 
aside, 
nav.support, 
form, 
caption, 
th, 
footer {
  background-color: cyan;
}

Furthermore, several elements have the same borders, so we could also combine these for easier editing of the border width/style/colour:

aside, 
form,
table,
footer {
  border: 2px solid teal;
}

header,
th,
td {
  border: 1px solid cyan;
}

You can then rewrite the entire CSS as:

header, 
aside, 
nav.support, 
form, 
caption, 
th, 
footer {
  background-color: cyan;
}

aside, 
form,
table,
footer {
  border: 2px solid teal;
}

header,
th,
td {
  border: 1px solid cyan;
}

aside {
  margin: .5em;
  padding: .5em;
}

nav.support {
  background-color: cyan;
  border: 1px solid navy;
}

form {
  margin: .35em;
}

.error {
  color: red;
  border: 2px solid maroon;
}

table {
  border-collapse: collapse;
}

caption {
  font-weight: bold;
  padding: .25em;
}

footer {
  font-size: .9em;
}

The above code is much easier to read and edit if the theme of your pages change.

When you want to apply some styles to multiple selectors (not just type selectors, this works with class and id selectors, too), you separate each selector with a comma-space delimiter.

Check out this CodePen example that uses grouped selectors.

See the Pen CSS Intro: Grouping Selectors by Wendi Jollymore (@ProfWendi) on CodePen.

Notice that there are 2 examples of grouped selectors: the first one is the level-1 and level-2 headings (it sets the colour of the two headings to navy and makes the text appear in italics). The second example further down gives a 10 pixel margin around the outside of all level-2 headings and any element with the .highlight or .error classes.