CSS Identifiers and Classes

— How we select elements for applying styles is called a selector. Until now, we have selected elements by tag name.

— Well, yes, we specified, for example, h1 or p and then listed CSS properties. Is there a better way?

— Sometimes, we need to make different styles for the same tag. For example, some paragraphs need to be painted red, and the others black. For this, a selector by tag name will not work for us and we’ll need to use a different approach.

Identifiers

When you need to select a single HTML element from many similar ones, you can add an identifier to it using the id attribute.

This identifier has an important feature. It must be unique throughout the entire HTML document. That is, the value of the id attribute should only be used once.

Let’s try adding a unique id to the second paragraph.

<p> Paragraph 1 </p>
<p id="unique-paragraph"> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>

Now we need to select this paragraph to apply the styles.

— I think for this we just need to use unique-paragraph instead of the tag name p.

— Not really. If you try adding styles this way, the browser will think you’re looking up for a tag named unique-paragraph, which doesn’t exist.

For the id selector to work correctly, we must add the # sign in front of the identifier.

<style>
  #unique-paragraph {
    color: red;
  }
</style>

This style will only be applied to the tag with id="unique-paragraph" and change its color to red.

Classes

— But more often you will have to group different elements to apply styles.

— This way I’ll be able to split them into groups?

— Yes. Let’s divide the same four paragraphs into two groups - even and odd. To do this, each element must be assigned a class using the class attribute.

Unlike the identifier, the same class can be used for an unlimited number of elements, and the elements will be combined into groups by the value of the class attribute.

To complete the task, we will need two classes - odd and even:

<p class="odd"> Paragraph 1 </p>
<p class="even"> Paragraph 2 </p>
<p class="odd"> Paragraph 3 </p>
<p class="even"> Paragraph 4 </p>

The selector for classes is slightly different than for the identifiers. Instead of the # symbol, you must specify a dot ., and then the value of the class attribute or simply the name of the CSS class.

We will have two classes and two selectors: .odd and .even.

Let’s make the text color green for the even paragraphs, and red for the odd ones:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
</style>

By the way, one tag can have many classes assigned to it.

For example, for the two middle paragraphs, we want to make the font 18px. Since they belong to different classes, we can’t just change the styles. We need to add one more class.

We’ll change the class attribute by adding a string large-font, separated from the initial class with space.

<p class = "odd"> Paragraph 1 </p>
<p class = "even large-font"> Paragraph 2 </p>
<p class = "odd large-font"> Paragraph 3 </p>
<p class = "even"> Paragraph 4 </p>

And add another selector to the styles:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
  .large-font {
    font-size: 18px;
  }
</style>

— And since an element can have several classes, is it possible to make a selector for several classes?

— Yes, it is possible. For this, two selectors by class name must be listed in a row. No spaces, commas, or other punctuation marks.

If you need to add styles for all HTML elements that belong to both even and large-font classes, then the selector will look like this:

<style>
  .even.large-font {
    text-align: right;
  }
</style>

Inside the selector, we’ve added the right-alignment of the text.

— Got it.

— In the previous examples, we grouped only tags of the same type using classes. But we can easily combine different tags into one group using one css class. For example, let’s add the red-text class to both the paragraph and the heading:

<h1 class = "red-text"> Heading 1 </h1>
<p class = "red-text"> Paragraph 1 </p>
<h1> Heading 2 </h1>
<p> Paragraph 1 </p>

After that, in styles, it will be possible to change the color of all HTML elements of this class.

There are many more rules for selectors, but more on them later. Now is the time to consolidate the acquired knowledge in practice.