Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As a follow on to the previous video about ID selectors in this video we're going to talk about Class selectors. You might at first think there are some similarities and in some ways there are. If we look into the markup here, we can see that we started with the class of first and then there's a list item with a class of last. And there are few other classes scattered throughout the document. The rule with classes is that unlike IDs, you can have as many instances of a given class as you want. So if we scroll down a little bit, we'll discover that there's a paragraph of the class of first, just like we had a list item with the class of first.
We can have as many firsts as we want, anytime something is the what we think of as being first, we can give it that class. In a sense, classes are used to collect elements into sets, like all of the things that are first, or all of the hyperlinks in a document that say, you know, the point to more details about something so on a magazine website on the front page there might be a headline and a little abstract paragraph or summary paragraph and then the link that says Read More and you could class all of those read more links as more. So a href equals whatever, class equals more.
If you were publishing some research and you had a bunch of images and some of your images, were pie charts and some were bar graphs and some of them were screenshots, you could class the different kinds of images differently, you could have a class of bar graph and a class of pie chart and a class of screenshot, for the various images and then style them differently. So let's do this by combining with an element name, we'll say, any list item with a class of first, let's put in a yellow background, if we save that, switch over to the browser and hit Reload, there is that yellow background on that first list item, quote only li.first, so the list item with the class of first says any list item that, whose class attribute has a value of first give it this style, in this case, a yellow background.
Now, If we take away the element name, if we just say .first, then that means any element that had a class attribute whose value contains the word first then give it a yellow background, so if we hit Reload here, then not only do we have a yellow backed list item but we have a yellow backed paragraph because both of those are elements with a class of first. But remember, that only works because of those first classes in there. CSS3, actually does have ways to select first elements without using classes, but nobody really supports those right now or at least very few browsers support that right now, so you end up doing this sort of thing.
Another way to select elements in a set is, every element with a class of tue, for Tuesday, should have an orange background and if we hit Reload, you can see in the little post archive calendar down here, we have orange backgrounds for all the table cells that had a class of tue. But here's an example where it can be helpful to have the element listed because, let's say we just want to highlight the actual days in the calendar and not the actual Tuesday header at the top. So we can say td.tue and then hit Reload and now because of the way that, that calendar is structured, only the table data cells, the td elements that have a class of tue are highlighted and the table header, the th element, with the same class, not being a td element, doesn't get matched, you know.
This just says any td element, with a class of tue, so, a th element, with a class of tue, doesn't get selected. So that's just very simply how classes work and in the next video, we're actually going to take a closer look at some of the nifty things you can do with classes.
Get unlimited access to all courses for just $25/month.Become a member