0:00:00.665,0:00:04.776
I love art museums. But I don't have time to go to art museums every day.

0:00:04.776,0:00:07.987
So thankfully, I can find beautiful paintings on the Internet.

0:00:07.987,0:00:11.278
Like even here on Khan Academy, in our art history section.

0:00:11.278,0:00:14.340
So I made this webpage with lists of famous paintings,

0:00:14.340,0:00:21.318
with one heading and lists for each art style, and links to articles about each of the paintings.

0:00:21.318,0:00:25.164
To make this webpage look a bit fancier, you know, artsy

0:00:25.164,0:00:31.149
I've applied CSS rules to change the font family of both headings-- the s and the s.

0:00:31.149,0:00:38.886
I like the cursive, but I think that 'fantasy' might look better, so let me change that.

0:00:38.886,0:00:43.846
Oh, and I have to change it here, because we have two rules.

0:00:43.846,0:00:49.262
But really, I always want all my headings on this page to have the same font family

0:00:49.262,0:00:54.414
and I don't want to have to keep changing the font family in two places every time I change my mind.

0:00:54.414,0:01:00.020
What is the solution here? To turn our two CSS rules into one CSS rule.

0:01:00.020,0:01:04.038
Hm, just think about that for a bit.

0:01:04.038,0:01:08.364
You might suggest adding the same class to our s and s.

0:01:08.364,0:01:12.047
And that would definitely work, and we could just have one CSS rule for that class.

0:01:12.047,0:01:14.828
But it ultimately would be more work on our end

0:01:14.828,0:01:19.119
because we'd have to remember to add that class every time we made an  or .

0:01:19.119,0:01:25.495
Fortunately, there is a better way. We can group our selectors together using commas.

0:01:25.495,0:01:31.970
We'll just add a comma after this "h1" here, then write "h2".

0:01:31.970,0:01:37.262
And now we can delete this other rule because we merged it into the first one.

0:01:37.262,0:01:39.947
And tada! Our web page looks the same.

0:01:39.947,0:01:44.272
Now when I want to experiment with changing the font family, I can do it in one place.

0:01:44.272,0:01:48.679
Here, I will change it back to cursive, and now they're all cursive.

0:01:48.679,0:01:55.765
Take careful note of this comma. The selectors have to be comma-separated, not space-separated.

0:01:55.765,0:02:03.046
As we've seen, a space is used for descendant selectors, and means something entirely different to CSS.

0:02:03.046,0:02:08.516
Grouping selectors can be a great tool to reduce the number of redundant selectors you have.

0:02:08.516,0:02:14.345
But don't overuse it. You shouldn't group two selectors just because they happen to have the same properties now.

0:02:14.345,0:02:18.365
You should group two selectors because you always want them to have the same properties.

0:02:18.365,0:02:21.887
Usually because they're semantically very similar to each other.

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

0:02:28.262,0:02:32.895
Stay tuned for one more common use case for group selectors.