Lesson Overview

In the previous lesson on CSS Syntax, you learned about basic element selectors (which are also called type selectors). There are other types of selectors you can use if you want to do more than select all elements of a certain type. Class selectors allow you to select multiple elements, even if they're not the same type of element. You can also use class selectors to select some elements of a certain type but not others.

Pre-Requisites

Make sure that you've worked through the previous tutorial, CSS Syntax before proceeding through this lesson.

Class Selectors

A class selector is used when you want to style a one or more different elements with the same appearance. Class selectors are useful when you want to apply the same style to several elements, regardless of element type. You can even use it to style some elements but not others. For example, perhaps you want to style some of the <aside> elements, but not all of them, with a red border, or perhaps you want to add a red border to an <aside>, a <figure>, and one or two paragraphs.

To use a class selector, you add the class="" attribute to the element(s) you want to style and assign it a CSS Identifier. Then you create a class selector rule in your CSS using the dot . symbol, followed by your class identifier.

CSS Identifiers are assigned to an element using the class="" attribute in the element's opening tag. CSS Identifers are used for more than just CSS (i.e. JavaScript) and they always follow the same naming conventions: CSS Identifiers must be in lower-case letters only, and should use a hypen to separate words in the identifier. Examples of correct, standard CSS Identifiers include page-heading, background-color, highlight, and dfn-css-id. Later, you'll notice that CSS properties also follow this standard.

For example, you might have several <article> elements and <aside> elements on a page, but you want the important articles/asides to have a yellow background. You might do something like this:

<!-- HTML code -->
<article class="important-thing"> .... </article>
<article>
  <aside class="important-thing">...</aside>
</article>
<aside class="important-thing"> .... </aside>
<article> .... </article>
<article> .... </article>
<article class="important-thing"> .... </article>
<aside> .... </aside>

/* CSS code */
.important-thing {
  background-color: yellow;
}

Notice that class selectors start with a period. They also include a CSS identifier which follows the same rules described earlier.

In the example, only the elements with class="important-thing" will be styled with a yellow background.

The CodePen below demonstrates how I used class selectors to style some different elements with a border and background colour:

See the Pen CSS Selectors: Class by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the class selectors demo CodePen, opens in the pen tab)

Combining Type and Class Selectors

You can combine the type selector with the class selector if you want to specify that only certain HTML elements should be styled with a specific class. For example, perhaps for <aside> elements, we'd like to apply the .important-thing styling to give them a yellow background, but we'd also like to add a red border. We don't want the red border on any other element using the important-thing class, just <aside> elements. But we do want all elements with the .important-thing class to have the yellow background.

.important-thing {
  background-color: yellow;
}
                  
aside.important-thing {
  border: .2em solid red;
}

The CSS rule above tells the browser to style any element element that has a class of "important-thing" with a yellow background, and <aside> elements will also have the red border.

Here is the example on CodePen.IO:

See the Pen CSS Selectors: Class Example 1 by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the type/class selectors example 1 CodePen, opens in the pen tab)

Notice in the example above that there are several elements with class="important-thing" - some <span> elements, both <aside> elements, and a <p> element. All of these elements have a yellow background. Additionally, all <aside> elements also have the red border because of the aside.important-thing rule: this rule adds the red border to <aside> elements that have class="important-thing".

Here's another example demonstrating a use of combined type and class selectors. Here, we want the level-1 heading and the div's to have certain styling when the "game" class is used. The level-1 heading with the "game" class also has coloured text.

CodePen: Combining Class & type Selectors

See the Pen Combining Class & Type Selectors by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the type/class selectors example 2 CodePen, opens in the pen tab)

Elements with Multiple Classes

An HTML element can be styled with multiple CSS rules. You could have an element styled using a type selector and also styled with a class selector, or you can have an element styled with two or more class selectors. Try the examples using this CodePen. When the window opens, you can edit the HTML and CSS code in the appropriate windows and see the results displayed along the bottom half of the screen (you can change the layout in the settings).

CodePen Exercise: Multiple Classes

See the Pen CSS Intro: Multiple Class Rules by Wendi Jollymore (@ProfWendi) on CodePen.

Choose two paragraph elements and add the class="highlight" attribute. Notice how the paragraphs show up in a grey background.

Now choose one of the paragraphs you chose earlier, and add the .error class: class="highlight error"

Be sure to put a space between "highlight" and "error", otherwise it won't work.

Notice after your changes, the one paragraph is not only showing in a grey background, but also has red text.

The Cascade

When more than one style is applied to an element, the element will show all of the styles. If one rule changes the same properties as another rule, the most recent rule (the one further down the CSS file) will override the other(s). For an example of how this works, try this CodePen.

CodePen: Multiple Styles

See the Pen CSS Intro: Multiple Rules (Overriding) by Wendi Jollymore (@ProfWendi) on CodePen.

In this example, I've added one property to the .error rule: I added background-color: yellow;

So now the .highlight rule changes the background to grey and the .error rule changes the background to yellow.

In the HTML, the first paragraph has been assigned both the .highlight (grey background) and .error (yellow background) CSS rules. Notice however, that this paragraph shows a yellow background: this is because the .error class was defined AFTER the .highlight class; therefore the .error class's background-colour property overrides the background-colour property set in the .highlight rule.

Practical Example

Here's one more practical example! In my tutorials, you'll notice that I sometimes have boxes labeled "Note", "Read!", "Important!", "Questions", and "Accessibility". These are created with <aside> elements, but with different classes. First, all boxes have the class called .notice applied to them. The .notice rule is coded as:

.notice {
  background-color: #ddd;
  border: 2px solid #777;
  border-bottom: 7px solid #777;
  border-radius: 5px;
  margin: 20px;
  padding: 15px;
}

In this rule, all elements with the .notice class have a grey background with a dark grey border that is 2 pixels all the way around and 7 pixels on the bottom. The border has rounded corners, and there is some spacing around and within the <aside> element.

So, by default, all notice aside's are grey. When I want to make a "Read!" notice, I add the .read class. This class is defined below .notice in my CSS file and is defined as:

.read {
    background-color: #e7e0eb; /* light purple */   
    border-color: #926aa6; /* purple */
}

The .read class, when applied to the <aside> element that already has class="notice", will override the background colour and border colour, changing the background to a light purple and the border colour to a dark purple.