Coding Newbie

CSS ID CLASS SELECTOR

CSS Class and ID Explained: CSS Selectors Fundamentals

Styling HTML elements and entire web pages is achieved through targeting different HTML elements in our CSS document. The most common way to accomplish this is with the use of two selectors: CSS Class and ID. Assigning ID and Classes allows us to control the styling and outlook of HTML elements.

Without defining ID and Class, it would be much harder to select elements and style them in CSS. Using them makes manipulating elements easier, and the entire code simpler to understand and read.

If you wish to learn first about all different types of CSS Selectors, you can do it by reading a post “What Are CSS Selectors And How Do They Work?”.

Now, let us review Class and ID selectors in more detail.

What is an ID?

ID is the selector we use to highlight an HTML element that is considered to be unique.

When you use ID to mark some element, you should not use it anywhere else in the same document. Defined ID is the exclusive “name” of that element. Named ID should never be used again and refer to multiple elements.

After defining ID of an element in HTML, we target that element in CSS with the use of “#” symbol, proceed by the id name.

<p id="main">First paragraph</p>
#main {
    color: red;
}

The code above, specified our paragraph with a “main” ID. That made our paragraph unique, and we should not use the same ID name again to define some other HTML element.

What is a Class Selector?

The class selector is used when we need to mark multiple elements with the same name.

This is the most important difference between the two.

Class selector is not unique, and we can use it as many times as needed. We use classes when we need to apply the same styling to more than one HTML element.

Mostly, these elements are of the same type (paragraphs, links, div, etc), but we can use them to highlight different type elements also.

In CSS, class is designated with “.” symbol, followed by the class value.

<p class="content">First paragraph.</p>
<p class="content">Second paragraph.</p>
<p class="content">Third paragraph.</p>
.content {
    font-size: 20px;
}

As seen in the code above, we have created three paragraphs. And all of them have the same class, a class “content“. This is possible to do with classes, but not with an ID.

The CSS styling rules (font-size: 20px) will apply on all paragraphs of the same class.

Using both: ID and Class

Important thing to keep in mind is that an element can have an ID and a Class. If that is the case, then the element will have both styles applied.

<p class="content" id="main">First paragraph.</p>
<p class="content">Second paragraph.</p>
<p class="content">Third paragraph.</p>
#main {
    color: red;
}

.content {
    font-size: 20px;
}

Now, we have three paragraphs with “content” class, and one with a “main” ID. Because our first paragraph has both a class and an ID specified, it will have all associated styling rules.

css class and id  paragraph styled with both id and a class
First paragraph has a red color due to “main” ID, and a font size of 20 px as a result of “content” class styling declaration.

The example above is the case of non-contradictory styling. More complex situations are when an ID and a class are contradicted to each other.

If styling rules are contradictory, an ID is considered more specified, and the ID styling rules will have an advantage over a class styling.

<p class="content" id="main">First paragraph.</p>
<p class="content">Second paragraph.</p>
<p class="content">Third paragraph.</p>
#main {
    color: red;
    font-size: 30px;
}

.content {
    font-size: 20px;
}

Now, our first paragraphs will experience some contradictions coming from ID and class. The “main” ID has determined font size of 30px, while the “content” class has 20px declared.

If this is the case, as an ID is considered to be more specific CSS selector, it will have an advantage over a class styling declarations. So, our first paragraph will be a bit larger that the other paragraphs of the same class.

css class and id paragraph styled with both id and a class

Elements can also have multiple classes, with different styling. If that is the case, all styling rules will apply.

Note: Keep in mind that the element can not have more than one ID. Declaring multiple IDs can crash your style.

<p class="content underlined">First paragraph.</p>
<p class="content">Second paragraph.</p>
<p class="content">Third paragraph.</p>
.content {
    font-size: 20px;
}

.underlined {
    text-decoration: underline;
}
css class and id multiple_classes_selectors

The first paragraph has two classes defined, so it will have a font size of 20px, and the text will be underlined.

Class vs ID: Which one to use?

The general rule is following:

If the styling declared should be unique and not repeated afterwards, you should use an ID. On the other hand, if the styling specified should be used multiple times, you should use a CLASS selector.

Conclusion

Understanding difference between an ID and a Class selector will give you the better control over your web page, and make your CSS code more effective.

The important thing to keep in mind here is the uniqueness of a targeted element. If the styling is repeated later on, put it in a class. If not, use an ID.

Another vital point here is the specificity. ID is more specific than a class, and the more specific the targeted element is, your code will be more straightforward and less prone to mistakes. Great tool you can use to achieve this is the tool called Specificity Calculator.

More about all different kinds of CSS Selector is available in the article “What Are CSS Selectors And How Do They Work?“. You are more than welcome to read it.

If you wish to learn more about CSS itself, and why CSS is important language to understand, you can read it in the article What is CSS and why is CSS so important?

%d bloggers like this: