1
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.

2
00:00:04,776 --> 00:00:07,987
So thankfully, I can find beautiful paintings on the Internet.

3
00:00:07,987 --> 00:00:11,278
Like even here on Khan Academy, in our art history section.

4
00:00:11,278 --> 00:00:14,340
So I made this webpage with lists of famous paintings,

5
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.

6
00:00:21,318 --> 00:00:25,164
To make this webpage look a bit fancier, you know, artsy

7
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.

8
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.

9
00:00:38,886 --> 00:00:43,846
Oh, and I have to change it here, because we have two rules.

10
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

11
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.

12
00:00:54,414 --> 00:01:00,020
What is the solution here? To turn our two CSS rules into one CSS rule.

13
00:01:00,020 --> 00:01:04,038
Hm, just think about that for a bit.

14
00:01:04,038 --> 00:01:08,364
You might suggest adding the same class to our s and s.

15
00:01:08,364 --> 00:01:12,047
And that would definitely work, and we could just have one CSS rule for that class.

16
00:01:12,047 --> 00:01:14,828
But it ultimately would be more work on our end

17
00:01:14,828 --> 00:01:19,119
because we'd have to remember to add that class every time we made an  or .

18
00:01:19,119 --> 00:01:25,495
Fortunately, there is a better way. We can group our selectors together using commas.

19
00:01:25,495 --> 00:01:31,970
We'll just add a comma after this "h1" here, then write "h2".

20
00:01:31,970 --> 00:01:37,262
And now we can delete this other rule because we merged it into the first one.

21
00:01:37,262 --> 00:01:39,947
And tada! Our web page looks the same.

22
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.

23
00:01:44,272 --> 00:01:48,679
Here, I will change it back to cursive, and now they're all cursive.

24
00:01:48,679 --> 00:01:55,765
Take careful note of this comma. The selectors have to be comma-separated, not space-separated.

25
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.

26
00:02:03,046 --> 00:02:08,516
Grouping selectors can be a great tool to reduce the number of redundant selectors you have.

27
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.

28
00:02:14,345 --> 00:02:18,365
You should group two selectors because you always want them to have the same properties.

29
00:02:18,365 --> 00:02:21,887
Usually because they're semantically very similar to each other.

30
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.

31
00:02:28,262 --> 00:02:32,895
Stay tuned for one more common use case for group selectors.