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:
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.
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.
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.
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).
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.
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:
In this rule, all elements with the .notice class have a
grey background with a dark grey border that is thicker
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:
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.
Exercise
Copy/Fork the CodePen below and follow the instructions inside
the comments of the CSS tab (the CSS tab also contains the
solution to the previous exercise):