How To Use Classes & IDs To Select Elements In CSS

479

How do you select the content you want to style in CSS?

You use CSS selectors!

CSS selectors allow you to choose where to apply styles.

There are several different types of CSS selectors, one of which we have already seen in the CSS intro post.

As a recap, we were applying styles to a <p> element by selecting p. We saw that doing this applies the styles to ALL p elements in your HTML file.

However, what if you want to target only one element? How do you select a specific one?

This is what this post will show you how to do by using two of the most commonly used CSS selectors – classes and ids.

---

Note ✍️

We use an external stylesheet for the examples to keep our code nice and clean!

We walk you through how to set one up right here where we explain the different ways to include CSS in HTML.

---

CSS Selector: Class

Assign a class to a tag then reference when styling by using .ClassName (full stop followed by the class name).

Note: The full stop ( . ) designates a class and must always come before the class name, otherwise, you won’t be doing anything to the element.

As an example, let’s give a <p> blue font and make an <h1> bigger.

Your HTML will be:

<p class="blue">I am a paragraph with BLUE text!</p>

<h1 class="large">I AM BIG</h1>

Your CSS will be:

.blue {	color: blue;
}

.large {
	font-size: 400%;
}

Notice that the full stop is only present in your CSS not in your HTML.

The good thing about classes is that you can use the same class on multiple elements. So if you want a <p> that is blue and large, all you need to do is add the large class to <p>.

<p class="blue large">I am a paragraph with BLUE text!</p>

You don’t need to write additional CSS – there is already a style applied to the large class.

Use a space to separate classes when adding more than one class to an element.

What if there are two elements with the same class, but you only want to target one of them?

Take this instance:

<p class="red-bg big">I am a BIG RED paragraph!</p>

<div class="red-bg">
	<p class="blue big">I am a BIG BLUE paragraph inside a RED box!</p>
</div>

.big {    font-size: 400%;
}
.red-bg {
    background-color: red;
}

Both the first <p> and the <div> take the class red-bg as they both have a red background color.

If you use .red-bg as the CSS selector, then you will be targeting both the first <p> and the <div>.

But assume you only want to style the first <p>. You can easily do this by using .red-bg.big as your CSS selector. This selector tells the browser to look for an element with classes of red-bg AND big.

Of course, you could just assign a new class to <p> but it will be unnecessary clutter.

Applying group styles

<div>s split elements into sections. You can apply styling to the section/group which is the <div> itself or to the content within a <div>.

In the example above, we apply a red background to the group consisting of the <div> and <p>, but only make the <p> blue and big.

To target a nested element using classes as CSS selectors, you would use the multi-class selector tip mentioned above. It applies similarly to element, instead of class, selectors.

So you could also select the <p> within the <div> by using div p as there is only one <div> with a <p> on the page.

CSS Selector: ID

The id selector serves the same function & applies similarly to tags as the class selector, but is referenced by #IdName (hash id name).

The main difference between ids and classes is that ids are only used once per page while classes can be used more than once per page.

Now let’s have a <p> with an id of special.

<p id="special">I am the capo di tutti i capi of coding and there's nothing you can do about it.</p> 

Give the paragraph a font color of blue.

#special {
	color: blue;
}

Section-off “capo di tutti i capi” using <span> to underline only that part of the sentence.

<p id="special">I am the <span>capo di tutti i capi</span> of coding and there's nothing you can do about it.</p> 

1. Assign a class or id to <span> – we go for class as you possibly might want to underline other text in this document. This way we only assign a style to one class and then freely use that class as many times as we need to.

<span class="underline">capo di tutti i capi</span>

2. Apply the CSS style to the <span>.

.underline {
  text-decoration: underline;
}

---

Note 👀

Putting <span> around any chunk of content allows you to:

(1) assign a class or id to select and use it

(2) apply different styles within a paragraph

---

What we end up with is a paragraph with blue text and a certain portion underlined for emphasis.

<p id="special">I am the <span class="underline">capo di tutti i capi</span> of coding and there's nothing you can do about it.</p>

And that’s pretty much all you need to know at the start to select elements in CSS for style applications.