- The class attribute has long been used to add semantic meaning to HTML elements. It's also a great way to add specific targeting for element styling as well, as we can target classes through the use of class selectors. So I just want to go over really briefly the syntax of class selectors, before we go into writing them ourselves. So essentially, what the class selector allows us to do is to target any element that has that class attribute. The example I give here in the first paragraph, for example, the class selector .author would target any element with a class attribute of "author." So if I scroll down a little bit into the syntax section, you can see that writing the syntax for class selectors is extremely simple.
There's just the value of whatever the class attribute is preceded by a period, and notice that there's no space between the period and the class attribute itself. Now, if we want to get a little bit more specific, we can make them element-specific by placing another simple selector in front of them. So the second syntax example that I have here has h1.warning, again no white space, and what that would do is only target the "warning" class attribute when it was applied to an h1 element. Okay, so let's jump into our code and experiment a little bit with the class selectors ourselves.
I have the class.htm file open from the 01_03 directory. In our styles section at the top of the page, there's already a class selector there, but we're going to ignore that for a moment. I want to scroll down and just show you guys, in terms of the structure of the example area, what we'll be doing. So, we have an article with a class of "example" and inside that we have a couple of headings, we have an h3 and an h4. That's followed by some paragraphs, and in the first paragraph, you'll notice that we have an emphasis tag with a class of "highlight," we have an h4 that follows that with a class of "highlight," and then we have a strong element with a class of "highlight." So here, we're seeing three different element types with the same class attribute, and that's one of the things that make classes so powerful is, you can apply them multiple times on a page to any element you want, so you can sort of semantically say something about that particular element even though they're different elements, and then we can take that further by styling it visually as well.
So I'm going to scroll back up to my styles, and below the existing class selector, warning, I'm going to add another selector, and for this one I'm going to do .highlight, so we're going to target that "highlight" class attribute that we saw down below in our code. Now, when I'm writing this selector, remember, the period goes first, there's no space between it and the class attribute value, so .highlight, and then I'll open up, close my curly braces, and then inside of that I'm just going to apply some styling.
I'm going to do font-weight, and I'm just going to make that normal. I'll do a font-style, and I'm also going to give that a value of normal. So what I'm doing here is, I'm just kind of resetting those ems and those strongs, no bolded text, no italicized text, and then I'm going to give it that sort of highlight look by giving it a background of just yellow. Okay, so now if I save this, go back out to the browser, scroll down to the example area and refresh, I can see that I'm targeting each of those three elements that have that class applied to it, regardless of where they're found or what the element type is, and that is what makes this class selector so flexible.
Anywhere that class is found, regardless of the element, it's going to go ahead and apply it. The highlighting looks really good in the body copy, but that headline doesn't look so great. So I'd like to be a little bit more specific about what happens when I have a heading that has the class of "highlight" applied to it. Well, remember, we can do element-specific selectors. So if I go back into my code, I can create a brand new selector, and this time I'm going to precede the period with an h4. So we're targeting any heading 4, and I'll say .highlight. So here, we're being very specific.
We're saying only when the highlight class is applied to a heading 4. Remember, there's no whitespace between the h4, the period, and the highlight. So here, I'm going to reestablish the font-weight to bold, so we'll do a font-weight of bold. I'm going to go ahead and make it visually different from the other headings by italicizing it, so I'm going to do a font-style and I'm going to set that to italic, and then I'm going to take that yellow background off, so I'm going to do a background of none.
Now I'm going to save this, go back out to my page and refresh, and you can see that now the heading has a slightly different look in the fact that it's italicized, so it is visually different from the other headings. We could also modify size, we could modify color, and the background is taken off of it. But it is still being represented as something different from the other headings. So we've got three elements here with the class attribute of "highlight," and they're getting very different styling based upon the class selectors that we've written.
Now, that's one of the great things that a class selector allows us to do. We can go in, and anywhere there's additional semantic meaning that's being applied by the class attribute, we can go ahead and add some type of visual styling to that as well. But class selectors can do some really nice things for us in terms of global styling. You may have noticed, for example, that when we first opened this file up, that warning class selector was just sitting there in our styles, and it wasn't really doing anything, because there was no element anywhere in my example page here that had the "warning" class applied to it.
So, class selectors allow us to sort of write global styling that we know that we're going to use throughout our site from time to time and then allows us to apply that styling anywhere we want it by simply applying the appropriate class attribute. So it allows us to sort of store styling for when we need it later, which is really nice. So that warning class selector says, "Anywhere that you find the class attribute "of 'warning' applied, make the color red." That makes sense, right? But you might do different warnings. You might have one in a span tag, you might have one in a paragraph tag, you might have one later on in a blockquote.
So it really makes sense to go ahead and store that styling within a class attribute and then, and I'll go down into this last paragraph here, you can see that it says, "Care should be taken "when using class selectors, as overuse of them "can bloat code and create stylesheets "that are hard to maintain." That is true. That's also a warning, so what I'm going to do is, I'm going to go ahead and inside that paragraph, I'm going to give it a class attribute of "warning." Now, as soon as I do that, when I save this and refresh my page, you can see the style is applied, perfect.
So class selectors can definitely store styles for later on. Now, this warning did have a purpose in using this example with that paragraph. It becomes really, really enticing for new designers to write all of their styles to class selectors and then just apply them wherever they want them. A lot of frameworks that you might see, like Bootstrap and things like that, they handle the bulk of their styling options through the use of class selectors. Other designers kind of go the other way and like to minimize their use to strictly semantic meanings or exactly kind of where they need them.
I sort of lean towards that latter. I don't like overusing class selectors. If you overuse them, you create a style sheet that's just filled with nothing but class selectors, which can be really hard to maintain, and then you've got to use all those class attributes all throughout your site, so it does kind of get littered after a while. So I would recommend using this technique as sort of a smart application of styling exactly when and where necessary, but you don't want to overdo it. Over-reliance on class selectors can really lead to bloaty code.
So, make sure that as you learn CSS, that you balance out their use with a sensible strategy.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors