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: .1em 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: .1em 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: .1em solid cyan;
}
aside {
background-color: cyan;
border: .2em solid teal;
margin: .5em;
padding: .5em;
}
nav.support {
background-color: cyan;
border: .1em solid navy;
}
form {
background-color: cyan;
border: .2em solid teal;
margin: .35em;
}
.error {
color: red;
border: .2em solid maroon;
}
table {
border: .2em solid teal;
border-collapse: collapse;
}
caption {
background-color: cyan;
font-weight: bold;
padding: .25em;
}
th {
background-color: cyan;
border: .1em solid cyan;
}
td {
border: .1em solid cyan;
}
footer {
background-color: cyan;
border: .2em 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: .2em solid teal;
}
header,
th,
td {
border: .1em 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: .2em solid teal;
}
header,
th,
td {
border: .1em solid cyan;
}
aside {
margin: .5em;
padding: .5em;
}
nav.support {
background-color: cyan;
border: .1em solid navy;
}
form {
margin: .35em;
}
.error {
color: red;
border: .2em 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.