Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Often you'll find that several different elements on the page require the exact same styling. Now while you can create multiple selectors to do this, it's much more efficient to group selectors together. Now in some of our past exercise files, we've done element grouping without really talking too much about the syntax, so in this movie I just want to take a brief moment to discuss the syntax of grouping selectors together and some of the benefits that we get from them. So I've got the grouping.htm file open, and you can find this in the 02_08 folder. And scrolling through my code, it doesn't take long to figure out that I've got some inefficient styles here.
You can see, for example, that all of these selectors, aside, article, section, header, all I'm really doing is telling them to display as block-level elements. And that's really designed to tell non- conforming user agents know what to do with these new HTML5 tags. So it doesn't make a whole lot of sense to have a separate rule doing this for each one of those elements when I could just sort of group them together. So what I am going to do is, right after aside, I am just going to type in a comma and add article, section, header, footer, nav.
And that's going to allow me to take each one of these selectors below it and get rid of it. And look at all the space that I am saving in my CSS now; it's much more efficient. So to group a selector together, here's all you need to do. You just use a comma. Now the amount of whitespace doesn't really matter. You could have whitespace between both of them or not. That's still going to work. It doesn't really matter. So really it's just personal preferences. It's whichever you think is a little bit more readable. Also notice that I can use as many selectors as I want. I am not limited to grouping just one or two selectors together.
I can throw three, four, five, six; It doesn't really matter. In this case, also these are all element selectors. You are not limited to just element selectors. Any type of selector you have you can group with other selectors. So later on when we learned about descendant selectors and nth-child selectors and all sorts of crazy selector types, you can group all of those as well. Now in this case we're just saving a little bit of space, but group selectors can also help make your content be a little bit more manageable too. Let me show you what I mean.
If I scroll down, I can see again we just have some h1s and h2s. The h2s are inside the asides down here, although there is a subheading down here that's not. But what if I wanted the h1s' and the h2s' formatting to be very similar? Maybe the only thing different, for example, is maybe I just want h1s to be red. So they are not exactly the same. The h1 has a color that's going to be different than the h2 selectors, but they are very, very similar. Well, in this case, I can sort of use grouping to help me make my styles a little bit more manageable but not replace everything.
Let me show you what I mean. So after the h1 rule, I am going to create another rule with a group selector that says h1, h2. So this is perfectly acceptable. I can have as many of these in a row as I want, and anything that's in here, if it conflicts, will overwrite this one due to the cascade, and we'll talk about that a little bit later on as well. So here for h1, h2 I am just going to do font-family, and we'll do Georgia. Below that we are going to do font- size, and we'll make that 1.4em, so they are going to be the same size, and then finally we will take font-weight and we will make that normal.
So most of the time headings are bold. We are going to tell these headings, don't be bold. So essentially h1s and h2s are going to look exactly the same except for the fact that h1s will be red. So if I save this, test this in one of my browsers, I can see that it's doing just that. The headings are all the same size. They are not bold. But the h2s are all black, where the heading one is red. This means that if I want to make any change to this formatting, so, for example, if I go back into my code and let's say I decide that I also want them to be italicized, So I could come in and say font-style: italic, save that, refresh it, and now they're all italicized as well.
So I didn't have to do that. If all my h1 styling was in one selector and my h2 is in another, I would then have to make that change in two separate selectors. Now I only have to make it in one. So, I can take those minor differences and split them out in their own selectors and sort of group all of the things that are going to be the same to put them in one centralized location that I can go ahead and update just once. So as a web designer, you want to try to write the most efficient styles as possible. That's really what you are going for. So knowing how and when to group selectors together can be a really big part of writing those efficient styles.
Just be sure to carefully plan out your styles so that you're only using group selectors when they are appropriate.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.