Coder Perfect

What exactly is the distinction between an id and a class?


When it comes to CSS, what’s the difference between div class=””> and div id=””>? Is it okay to use the div id=””> tag?

I see different developers doing this in both ways, and since I’m self taught, I’ve never really figured it out.

Asked by johnnietheblack

Solution #1

While ids must be unique, classes can be applied to a variety of things. In CSS, ids are denoted by #elementID, and class elements are denoted by. someClass

In general, use id to refer to a specific element and class to refer to a group of items that are all the same. Header, footer, and sidebar are examples of popular id elements. Highlight and external-link are examples of common class elements.

It’s a good idea to familiarize yourself with the cascade and the precedence given to certain selectors:

The most important distinction to remember is that id selectors take precedence over class selectors. If you possessed this, you could:

<p id="intro" class="foo">Hello!</p>


#intro { color: red }
.foo { color: blue }

Because the id selector takes precedence over the class selector, the text would be red.

Answered by 2 revs, 2 users 94%

Solution #2

Perhaps the following analogy can help you comprehend the distinction:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Student identification cards are unique. On campus, no two students will have the same student ID card. Many students, on the other hand, can and will share at least one Class.

It’s fine to group students together under a single Class title, such as Biology. Putting several students under one student ID, on the other hand, is never acceptable.

You can give Rules to a Class while giving Rules over the school intercom system:

.Biology {
  color: red;

You can also give restrictions to a specific student by referring to his ID:

#JonathanSampson {
  color: green;

Jonathan Sampson is receiving two orders in this case: one as a Biology student and the other as a direct obligation. Jonathan will overlook the earlier request to wear a red shirt because he was directed to wear a green shirt explicitly via the id attribute.

The selectors with the most specific criteria win.

Answered by Sampson

Solution #3

The sole difference between the two is that a class can be used several times on a page, whereas an ID can only be used once. Because there will only be one main content area on the page, it is fair to place an ID on the div element that is marking up the main content. In contrast, if you want to set up alternating row colors on a table, you’ll need to utilize a class because they’ll be used several times.

Identification cards are a very effective weapon. A piece of JavaScript that manipulates the element or its contents in some way can target an element with an ID. The ID element can be used to replace anchor tags with name attributes as the target of an internal link. Finally, if your IDs are clear and logical, they can act as “self documentation” within the document. For example, if the starting tag of the block has an ID of “main,” “header,” “footer,” or something similar, you don’t need to include a remark before it specifying that it will contain the primary content.

Answered by Konstantin Tarkus

Solution #4

An id must be unique throughout the entire page.

A class can be applied to a variety of things.

Using ids is sometimes a smart idea.

There is normally one footer and one header on a page…

The footer might then be placed in a div with an id.

while yet having a class

Answered by Luc M

Solution #5

IDs are one of a kind. Classes aren’t like that. Multiple classes are also possible for elements. Classes can also be added and removed from an element dynamically.

Anywhere you can use an ID you could use a class instead. The reverse is not true.

The convention appears to be to use IDs for page elements that appear on every page (such as “navbar” or “menu”) and classes for everything else, however this is just a convention, and there is a lot of variation in implementation.

Another distinction is that the label> element for form input elements refers to a field by ID, so if you’re going to utilize label>, you’ll need to use IDs. is a feature of accessibility that you should take use of.

IDs were also preferred in the past since they were easy to obtain with Javascript (getElementById). With the introduction of jQuery and other Javascript frameworks, this is no longer an issue.

Answered by cletus

Post is based on