0

I know the differences between ID and Class. But why both IDs take effect in this html? ID should be used uniquely, right?

#text {
    text-align:center;
    color: red;
}

Then id="text" was used twice in my same html page, and both get same effect. Why do i have to use "class", if 'id' has same effect?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user697911
  • 10,043
  • 25
  • 95
  • 169

4 Answers4

4

That IDs seem to behave like classes when you have duplicate IDs in a page is nothing more than a side effect of how browsers implement CSS.

Whether a document conforms to its own rule that IDs should be unique is not relevant to CSS. CSS simply says to match elements that have a specific value in its ID attribute, to an ID selector:

An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.

It does not say anything about what should happen if there is more than one element with such an ID, because it assumes that you are working with a conforming HTML document.

You should use classes to group your elements because that's what HTML says to do, and you are trying to conform to valid HTML. Having duplicate IDs is quite simply not allowed by the HTML spec, and can result in unexpected behavior, so it is not something to be relied on regardless of what effect it has in browsers.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

Yes, 'id' have the same effect like 'class'. But there is some different between them. 1. The 'id' selector can't be repeat in the same page. That means when there is a id selector
named "header",there can't be another "header" in this page.This is for js dom command. 2. The 'id' selector have a higher priorty. That means when you have a markup like this:

<style>
    #header{color:red;}
    .header{color:blue;}
</style>

<div id="header" class="header">
     test
</div>

the color in test is "red". http://www.impressivewebs.com/difference-class-id-css/

Tyler.z.yang
  • 2,402
  • 1
  • 18
  • 31
  • "The 'id' selector can't be repeat in the same page. That means when there is a id selector named "header",there can't be another "header" in this page." That's not true. Your example does not demonstrate what you are stating. – BoltClock Feb 24 '14 at 03:29
  • My example is explain the second statement. There can be another "header" id selector in the same page. But the html definition shows that we can't have another same id selector in the same page. This is for javascript dom command. Sorry I haven't explain it clearly. – Tyler.z.yang Feb 24 '14 at 03:33
  • When you use the javascript dom command like: var _header = document.getElementById("header"); That will make a mistake if there is another "header" id selector in the same page. – Tyler.z.yang Feb 24 '14 at 03:35
  • Ah, confusing terminology then. ID selectors are things like `#header` - they pertain to CSS. You are referring to the `id` *attribute* in HTML. – BoltClock Feb 24 '14 at 03:38
  • Ah...your are right.I didn't answer the question in a proper way. – Tyler.z.yang Feb 24 '14 at 03:43
0

the DOM will not fail to load with duplicate IDs, but you will have negative effects with other aspects, like javascript. If you are only using ID to identify where CSS rules should apply then they will work just like Class.

In general, ID should always be unique on the page, but the DOM will not enforce this.

Fred Phillips
  • 23
  • 5
0

IDs may work for css in some browsers, but not in others. There may also be bugs and side effects, for example:

<div>
    <input type="radio" id="id1" name="r1" />
    <label for="id1">this is radio label for id1</label>
</div>
<div>
    <input type="radio" id="id1" name="r1" />
    <label for="id1">this is another label for id1</label>
</div>
<!--the second label will also trigger the first radio change -->

Sometimes the functions won't be bind to your radio. Just keep IDs unique on the page.

bjb568
  • 11,089
  • 11
  • 50
  • 71
jingyinggong
  • 636
  • 5
  • 9