0

I understand you should use class for multiple elements and ID for a single element.

However they can both be used on multiple elements.

So are these two elements (class and id) identical in what they can actually do (as opposed to what they are supposed to do) or am I missing something?

For example I've created both Classes and ID's and applied them both to mutliple elements on my fiddle: http://jsfiddle.net/4qyoyfwq/ (coded below):

#blueid {
    color:blue
}
.greenclass {
    color:green
}

p#purple {
    color:purple
}

p.yellow {
    color:yellow
}
<p id="blueid">Hey! I am blue id</p>
<p class="greenclass">I am green class</p>
<b id="blueid">Yup, also blue id!</b>
<br />
<br />
<b class="greenclass">Yet I am green class</b>
<br />
<p id="purple">I am purple id</p>
<p class="yellow">I am yellow class</p>

So why the two different types?

Tiny
  • 27,221
  • 105
  • 339
  • 599
Sam
  • 111
  • 10
  • 3
    Id must be unique(maybe this is the 10000000 time i wrote it in SO). – Alex Char Dec 09 '14 at 15:44
  • Semantics! Not much of an Id if it can't be used to Id something – Djorge Dec 09 '14 at 15:45
  • How do you **identify** two objects that are exactly the same? – Leo Dec 09 '14 at 15:47
  • Please explain what you mean by "unique" as I can create multiple ID's and apply them to multiple elements? – Sam Dec 09 '14 at 15:47
  • 2
    @Sam that isn't valid HTML. – James Donnelly Dec 09 '14 at 15:48
  • 1
    You can but you shouldn't. Firefox did not used to render pages correctly when there were multiple instances of the same ID, for example. There are millions of fixes that browsers make to cope with invalid HTML: this is one of them. But the HTML is still invalid and other, less tolerant programs may have a problem with it. – rikkit Dec 09 '14 at 15:50
  • @JamesDonnelly since it's invalid did it ever not work (such as in early versions of IE). Is it simply new browsers versions accommodating? – Sam Dec 09 '14 at 15:50
  • 1
    Multiple ids violates html standards. Modern browsers may forgive common violations such as these in an attempt to win popularity. :) I recommend sticking to the standards over browser implementation of the standards wherever you can. The authors of the standard publish a service that will validate your html against a given html version. http://validator.w3.org/ Trust that, rather than your browser. – ne1410s Dec 09 '14 at 15:51
  • 1
    @Sam that entirely depends on what you mean by "not work". HTML cannot stop you from using two identical ID attributes in the same document, however it'd be completely pointless to do so as only the first would ever be targeted by the URL or JavaScript. CSS doesn't care for HTML semantics. – James Donnelly Dec 09 '14 at 15:53
  • Thank-you @ne1410s you answered my underlying question at last!! The reason it works is that modern browsers are simply accommodating invalid code! Which actually serves to confuse the heck out of people learning CSS!!! Please rewrite as an answer and I'll accept. – Sam Dec 09 '14 at 15:54

4 Answers4

3

Ids have a much larger specificity than classes (100 vs 10)

This means that if I have an element with id="test" and class="test" the #test class rules will override the .test rules

So in the example below:

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

#test {
  color: red
}

.test {
 color: blue;
}

The text will be red - even though the .test class appears later in the css file

Danield
  • 121,619
  • 37
  • 226
  • 255
2

An ID should only be used once per page, a CLASS can be used as many times as you want. Just because you can type id="myId" as many times as you would like in your HTML does not mean you should do it.

Besides you have to watch out for specificity when using IDs, IDs are a lot "heavier" than a CLASS and therefore can cause you to write some bloated CSS selectors if you need to override their styles.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
1

Multiple ids violates html standards.

Modern browsers may forgive common violations such as these in an attempt to win popularity. :)

I recommend sticking to the standards over browser implementation of the standards wherever you can. The authors of the standard publish a service that will validate your html against a given html version.

http://validator.w3.org/

Trust that, rather than your browser.

ne1410s
  • 6,864
  • 6
  • 55
  • 61
0

So are these two elements (class and id) identical in what they can actually do (as opposed to what they are supposed to do) or am I missing something?

Not quite.

Dont confuse what it appears you are able to do in your browser with what you should be able to do, or indeed what you should be doing.

Having multiple ids with the same value is invalid HTML, according to the spec

..This attribute assigns a name to an element. This name must be unique in a document.

The way multiple id attributes sharing the same value are parsed is dependant on the browser, and how it decides to handle such anomolies.

Generally browsers are relatively 'flexible' when it comes to interpreting this rule, hence why you see 'apparent' support for multiple identical ids, however due to the fact this is in fact invalid, this support may change at any time should the browser vendor decide to adhere strictly to the spec.

As such, it should not be relied upon.

Note that this relates to the specific function of class and id. An id is a unique reference to a DOM node irregardless of style, a class is a reference to a group of nodes with, (one would assume) shared styling.

As noted elsewhere, the principle of specificity relates to this targetting, with a higher weighting assigned to more specific attributes (those attributes which target fewer elements). As such, in CSS terms, a selector on id will overpower one on class.

Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137