WEBVTT

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

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

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

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

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

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

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

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

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

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

00:00:49.262 --> 00: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.

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

00:01:00.020 --> 00:01:04.038
Hm, just think about that for a bit.

00:01:04.038 --> 00:01:08.364
You might suggest adding the same class to our s and s.

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

00:01:12.047 --> 00:01:14.828
But it ultimately would be more work on our end

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

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

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

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

00:01:37.262 --> 00:01:39.947
And tada! Our web page looks the same.

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

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

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

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

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

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

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

00:02:18.365 --> 00:02:21.887
Usually because they're semantically very similar to each other.

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

00:02:28.262 --> 00:02:32.895
Stay tuned for one more common use case for group selectors.