CSS Syntax: Class Selectors - Images: Japanese

Hey everyone!

Let's continue and look at the syntax and usage of the class attribute on the CSS side.

We'll start with the HTML. To add a class attribute to a p element, you write it like this:

<p class="test">This element has the style applied. The class name is test.</p>

That part should be straightforward. Now let's look at how to write the CSS side.

Take a look at the following CSS:

p {
    font-size: 18px;
    font-weight: bold;
}

The selector here targets the p element — nothing new so far. Now let's add a class name to it.

To write a class selector, put a . (dot) right before the class name — no spaces in between. The full syntax looks like this:

p.test {
    font-size: 18px;
    font-weight: bold;
}

This applies the style only to p elements that have the class name test.

Now for a slightly more advanced point. The selector p.test targets only p elements with the class test.

So if you change the element to a div, the style will not apply:

<div class="test">This element will not have the style applied.</div>

To apply the style to a div element as well, you can specify multiple selectors like this:

p.test, div.test {
    font-size: 18px;
    font-weight: bold;
}

Separate the selectors with a comma.

There are also many cases where you want to apply a style to every element that has a given class name. For that, you can use * (the asterisk):

*.test {
    font-size: 18px;
    font-weight: bold;
}

Using * targets all elements with the class name test.

You can also omit the * from a class selector:

.test {
    font-size: 18px;
    font-weight: bold;
}

This targets all elements with the class name test just the same. Omitting the * is the standard way to write it.

So with the HTML below:

<p class="test">This element has the style applied.</p>
<div class="test">This element also has the style applied.</div>

The style will be applied to all elements that share the same class name.

Next — you can assign multiple class names to a single tag.

Say you have the following CSS:

.test {
    font-size: 18px;
}
.test2 {
    font-weight: bold;
}

The element below will have both selectors applied — the text will be 18px and bold:

<p class="test test2">This element has both the test and test2 class names.</p>

When specifying multiple class names in the class attribute, separate them with a single space.

You can also chain multiple class selectors together. Take a look at this example:

.test.test2 {
    font-size: 18px;
    font-weight: bold;
}

Two class selectors are chained together here. This applies the style only when an element has both test and test2 as its class names. The order doesn't matter — either class name can come first. Note that when chaining class selectors, there must be no spaces between them — write them directly adjacent to each other.

<p class="test test2">This element has the style applied.</p>
<p class="test2">This element does not have the style applied.</p>

That covers it all! Was that a lot to take in at once?

CSS syntax isn't all that complicated, so you'll get comfortable with it pretty quickly once you start writing it. Try creating an HTML file and a CSS file on your own computer and experiment with different things.

In the next article, we'll cover the ID selector. Keep it up — see you there!

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする