Rectangle 27 1

css Difference between div id and div class?


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

IDs are unique. Classes aren't. Elements can also have multiple classes. Also classes can be dynamically added and removed to an element.

In years gone by IDs were also preferred because they're easily accessible in Javascript (getElementById). With the advent of jQuery and other Javascript frameworks this is pretty much a non-issue now.

One other difference is that for form input elements, the <label> element references a field by ID so you need to use IDs if you're going to use <label>. is an accessibility thing and you really should use it.

The convention seems to be to use IDs for page elements that are on every page (like "navbar" or "menu") and classes for everything else but this is only convention and you'll find wide variance in usage.

Note
Rectangle 27 1

css Difference between div id and div class?


IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of self documentation within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.

Note
Rectangle 27 1

css Difference between div id and div class?


#intro { color: red }
.foo { color: blue }
<p id="intro" class="foo">Hello!</p>

@HerrSerker why not adding another CSS class, instead of id attribute?

I prefer to see ID in this way: if you have many elements which are alike (e.g. <li>in an <ul>) and you want to have a single one of them to behave different (whether CSS or JS doesn't matter), then you use id attribute.

In general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. For instance, common id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.

It's a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html

Just confused these two things for quite a long time. Now I understood that "id" should be referred with unique element while "class" can be applied into multiple elements or things according their difference

TBH, nobody use id any more unless it has something to do with integration with JavaScript (when you need an unique value). It is html leftover and you do not need to use it just because it exists. Saying that you have only one header and such so you need id instead of class might be correct. But let's say you have a search bar with style properties. If you wanted to add another search bar with the same properties in the end of page later too you couldn't, because id can only be used one once. Honestly, I just don't see any use of id. It doesn't make your code more organised or anything.

The most basic precedence you should understand, however, is that id selectors take precedence over class selectors. If you had this:

The reason, for those who care, that #intro has precedence is because of something called specificity: w3.org/TR/CSS2/cascade.html#specificity

The text would be red because the id selector takes precedence over the class selector.

ids must be unique where as class can be applied to many things. In CSS, ids look like #elementID and class elements look like .someClass

Note
Rectangle 27 1

css Difference between div id and div class?


<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

Classes are like categories. Many HTML elements can belong to a class, and an HTML element can have more than one class. Classes are used to apply general styles or styles that can be applied across multiple HTML elements.

I use IDs and classes in this fashion:

IDs are identifiers. They're unique; no one else is allowed to have that same ID. IDs are used to apply unique styles to an HTML element.

In this example, the header and content sections can be styled via #header and #content. Each section of the content can be applied a common style through #content .section. Just for kicks, I added a "special" class for the middle section. Suppose you wanted a particular section to have a special styling. This can be achieved with the .special class, yet the section still inherits the common styles from #content .section.

When I do JavaScript or CSS development, I typically use IDs to access/manipulate a very specific HTML element, and I use classes to access/apply styles to a broad range of elements.

Note
Rectangle 27 0

css Difference between div id and div class?


Sometimes you do have to use classes for event binding. In such cases, try to avoid classes which are being used for applying CSS and rather add new classes which doesn't have corresponding CSS. This will come to help when you need to change the CSS for any class or change the CSS class name all together for any element.

Twitter Bootstrap uses this principle - i.e. there are no IDs used at all (v3.3). It's a more extreme example because they need their library to be as generic as possible. It does show the benefit of only using classes - which is that you can then apply it across many more sites with less changes

When applying CSS, apply it to a class and try to avoid as much as you can to an id. The ID should only be used in JavaScript to fetch the element or for any event binding.

Note
Rectangle 27 0

css Difference between div id and div class?


CSS is object oriented. ID says instance, class says class.

Note
Rectangle 27 0

css Difference between div id and div class?


#JonathanSampson {
  color: green;
}
.Biology {
  color: red;
}
<div id="SomeId" class="SomeClass"></div>
<student id="JonathanSampson" class="Biology Physics" />

"Tomorrow, all students are to wear a red shirt to Biology class."

In this case, Jonathan Sampson is receiving two commands: one as a student in the Biology class, and another as a direct requirement. Because Jonathan was told directly, via the id attribute, to wear a green shirt, he will disregard the earlier request to wear a red shirt.

It's okay to put multiple students under one Class title, such as Biology. But it's never acceptable to put multiple students under one student ID.

Or you can give rules to a Specific Student, by calling his unique ID:

Perhaps an analogy will help understanding the difference:

Student ID cards are distinct. No two students on campus will have the same student ID card. However, many students can and will share at least one Class with each other.

Thats a great analogy!

When giving Rules over the school intercom system, you can give Rules to a Class:

Note