Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the videos so far in this chapter, we've actually been working with, what are sometimes called simple selectors, at least I thing of them as simple selectors. In each of these cases, we're making one selection at a time. So, for example, h1. So in this case, we're saying, any h1 element, make it's text uppercase, like we just did there.
And that's all fine but we're really only selecting one thing at a time and suppose we wanted to do that for all heading levels, one through six, so we might do it like this. If we hit Reload we'll have the desired effect, but that's really clumsy and just not very efficient, you might think yourself, man there probably should be a better way to do that and fortunately, there is and it's called a group selection. So the way this works is all the things you want to select, you can group together using commas just like this.
Actually, I'm just going to do it like that. So instead of saying repetitively h1 text-transform uppercase, h2 text-transform uppercase, well, I'll just say h1, h2, h3, h4, h5 so, we're using the commas to group them all together and then if we hit Reload, there's no change, because what we've just done here is functionally exactly the same as this. This and this are equivalent. This is much nicer so this is the right way to do it.
Now if you don't like putting all the stuff on one line, all your selectors on one line, you can group them like this, that's ok. That's going to have exactly the same effect, the whitespace there doesn't really matter. It's the commas that are important, the commas bring these together into a group. One thing you do want to watch out for, is that sometimes you can get a little carried away and put a comma at the end and that often completely breaks what you're trying to do, as you can see here, all the text transform and all the uppercasing ran away. Just having a comma at the end of your selector with nothing after it except for the declaration block that's a no, no. So you want to make sure you don't have that last comma, right before the declaration block starts. So, as another example, suppose we wanted to put back a color on all table elements, either table data, cells or table header cells, we can do th, td, or td, th, that order actually doesn't make any difference at all and then say background and we'll pick something that might look very cryptic to you but which we will discuss in a later chapter on colors and backgrounds and then if we scroll down a little bit and look at the post archive, by hitting a Reload, there we go. We've added a greenish background color to the backgrounds of all of the th and the td elements in the entire document. This just happened to be the only ones. So as we said before, you can group anything that you like.
You can group when any selector type, we can have all Wednesday ths and all Friday tds that for whatever reason we wanted to do that, we could have let's just say any table header with a class of Wednesday and any td element with a class of fri, do this and so when we hit Reload, there you go. You can have Ids in your selectors that you group together, classes. Really, all you're doing is what was shown before. With a group selector, you're just compressing down this sort of a thing to this. So, that's grouped selection.
Get unlimited access to all courses for just $25/month.Become a member