ID vs CLASS in CSS. Please explain in detail with example_问答_开发者

I have heard that ID is unique and can only be used once in a page, but its working fine when used over multiple times on a page. Please let me know the purpose of ID and hows its exactly different from classes?

@HTML FILE

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <LINK href="special.css" rel="stylesheet" type="text/css">
   <title>Untitled Document</title>
   </head>

    <body>
 开发者_运维知识库   <div class="layout">
    <div class="left_box">
    <div id="color"></div>
   </div>

   <div class="right_box">
    <div id="color"></div>
    </div>
     </div>
   </body>
   </html>

@CSS FILE

      @charset "utf-8";
     /* CSS Document */
     .layout {
 width:600px;
  height:600px;
  background-color:#666;
  margin:0 auto;
      }

     .left_box {
  width:300px;
  height:600px;
  float:left;
        }

    .right_box {
 width:300px;
 height:600px;
 float:right;
    }

    #color {
background-color:#CCC;
height:600px;
    }

I have heard that ID is unique and can only be used once in a page

That is an HTML rule and has nothing to do with CSS.

but its working fine when used over multiple times on a page.

Browsers perform error recovery. Don't depend on it as not all browsers will recover from all errors in the same way. Write valid markup.

Please let me know the purpose of ID and hows its exactly different from classes?

In HTML terms — an id is unique per document and can be a link target. A class can be reused.

In CSS terms — An id selector has a higher specificity than a class selector.

You have heard correctly. The behavior you are seeing is the result of browsers being coded to be extremely accommodating in the face of gross violations of the HTML standard.

The idea behind the fact that they have been coded to work even when presented with "bad" data is that, to less technically proficient users, it's the browser's fault if something does not work. Browsers were forced to work with tag soup, and this is the logical extension.

If I can use an analogy of cars:

ID is like a Registration Plate

supposed to be unique - allows you to uniquely identify and style a single element

Class is like a Vehicle Model

allows you to deal with a set of related elements in one go.

Continuing the anaology:

It's fine to duplicate registration plates in so far as the cars still work - but the police would get quite annoyed! How would you identify a particular driver as having been speeding?

The same applies with HTML elements - reusing the same ID just stops you identifying a single element when you need to.

Using the same ID for multiple items causes your HTML to be invalid.

The simple answer is just that. If you're using an ID (a unique identifier) multiple times you're invalidating your HTML.

Just as chewing gum can be used to stick a painting to a wall, the same ID can be used multiple times because HTML doesn't handle errors in a draconian fashion. It still doesn't make it correct or even a good use of the attribute.

Classes are designed so that you can relate multiple elements on a page. This is what it's designed for.

If you care for XHTML/HTML validation, then you should use unique IDs.

See this:

Class vs. ID

And

Why must the ID attribute be unique on each page?

Hope it helps.

In CSS terms, ID's are faster to find than classes.

You should use classes for things that are to be re-used.

EG:

@CSS

.displayNone
{
    display:none;
}

Confusion abound here. Turns out, everybody is kinda right. Here are the facts:

 1. CSS doesn't care much which you use, as far as actually applying
    styling. ID's are technically faster for a browser rendering engine,
    but other than the most extreme of circumstances you'll probably
    never notice a speed difference
 2. . JavaScript cares very much about ID's. It can be noticeably faster
    for JavaScript to find an element by an ID. And this is where the
    "uniqueness" is very important. JavaScript will only find the
    "first" element with that ID, so if you have multiple on the page,
    confusion may ensue.
 3. ID's have an infinitely higher specificity value than classes. If
    there is an element with an ID and a class and they both apply
    styles, the styles applied by the ID will take precedence over the
    styles applied by the class. This can be useful, this can be a
    hindrance.

here is simplest example

#id    { color: red; }
.class { color: green; }

It's just an attribute and it's a seemingly arbitrary difference in syntax depending on which one you use. The results are predictable:

<div id="id">Would be red</div>
<span id="id">Would be red</div>

<div class="class">Would be green</div>
<span class="class">Would be green</div>

REFERENCE

An ID is used to reference certain elements when using JQuery / Javascript etc, so technically if you wish to utilise these features then IDs on your page should be unique.

If you are only bothered about styling then it really isn't a huge issue, although it isn't valid practice.