Grouping CSS selectors

{'type': u'plain'}

I love art museums. But I don't have time to go to art museums every day.

So thankfully, I can find beautiful paintings on the Internet.

Like even here on Khan Academy, in our art history section.

So I made this webpage with lists of famous paintings,

with one heading and lists for each art style, and links to articles about each of the paintings.

To make this webpage look a bit fancier, you know, artsy

I've applied CSS rules to change the font family of both headings-- the s and the s.

I like the cursive, but I think that 'fantasy' might look better, so let me change that.

Oh, and I have to change it here, because we have two rules.

But really, I always want all my headings on this page to have the same font family

and I don't want to have to keep changing the font family in two places every time I change my mind.

What is the solution here? To turn our two CSS rules into one CSS rule.

Hm, just think about that for a bit.

You might suggest adding the same class to our s and s.

And that would definitely work, and we could just have one CSS rule for that class.

But it ultimately would be more work on our end

because we'd have to remember to add that class every time we made an or .

Fortunately, there is a better way. We can group our selectors together using commas.

We'll just add a comma after this "h1" here, then write "h2".

And now we can delete this other rule because we merged it into the first one.

And tada! Our web page looks the same.

Now when I want to experiment with changing the font family, I can do it in one place.

Here, I will change it back to cursive, and now they're all cursive.

Take careful note of this comma. The selectors have to be comma-separated, not space-separated.

As we've seen, a space is used for descendant selectors, and means something entirely different to CSS.

Grouping selectors can be a great tool to reduce the number of redundant selectors you have.

But don't overuse it. You shouldn't group two selectors just because they happen to have the same properties now.

You should group two selectors because you always want them to have the same properties.

Usually because they're semantically very similar to each other.

In this case, my selector is for all heading types, which I often want to share the same styles.

Stay tuned for one more common use case for group selectors.