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