Grouping CSS selectors | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

Grouping CSS selectors | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

– [Voiceover] I love art museums. But, I don’t have time to go to art museums, everyday. 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 web page 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 web page look a bit fancier, you know “artsy”, I’ve applied CSS rules to change the font family of both headings, the h1s and the h2s. 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 since 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. Hmm, just think about that for a bit. You might suggest adding the same class to our h1s and h2s and that would definitely work and we could have just one
CSS rule for that class. But, it’d ultimately be more work on our end because we’d have to remember to add that class every time you made an h1 or h2. Fortunately, there is a better way. We can group our selectors
together using commas. We just add a comma after this h1, here, then write h2. And now we can delete this other rule because we merged into the first one. And ta-dah, 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 amount 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.

Author: Kevin Mason

2 thoughts on “Grouping CSS selectors | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

  1. The challenge called Grouped Animals that followed this video is hard for me to understand. Not eve, the problem is that I know my solution is right but it wont give me credit for it. I have already finished the whole program except for that little portion. I need to complete this by March 17 so my school can earn money

Leave a Reply

Your email address will not be published. Required fields are marked *