What happens if we try to apply the same id to multiple elements? Will our styles not get applied to the targeted, ided elements?

Question

What happens if we try to apply the same id to multiple elements? Will our styles not get applied to the targeted, ided elements?

Answer

As HTML and CSS are designed to be very fault tolerant, most browsers will in fact apply the specified styles to all elements given the same id. However, this is considered bad practice as it defies the W3C spec.

Applying the same id to multiple elements is invalid HTML and should be avoided.

41 Likes

For that purpose we have class attributes, which may be distrbuted everywhere and anywhere.

The reason we can only have one id is because it is a fragment identifier that can be hooked with an HREF.

<div id="history">

</div>

and anywhere else in the same page,

<a href="#history">History</a>

Imagine the confusion over which one to hook if there is more than one id="history". The browser may always go to the first one in the page, though Iā€™ve not tested this. Best to stick to the spec and write valid HTML.

117 Likes

Thank you very much for the reply @mtf! Very insightfull indeed.

Also in the next lesson it is explained another reason why not to use multiple ā€œidā€, which is because of the matter of Specificity of the elements. Using too many ā€œidā€ can cause the document hard to edit in the future because it has a higher priority when CSS rules are applied. I hope I got it right, hehe.

8 Likes

Specificity if something we should keep a tight rein on, keeping our documentā€™s specificity as low as possible so that future changes to the page or site in general are not a massive undertaking, but a smooth transition.

style  id   class  type    # element
  0     0     0     1
  0     0     1     0
  0     1     0     0
  1     0     0     0

Higher specificity as we go left. The term priority is not really a common term in CSS. Specificity is an indication of importance of a selector.

p             element type
.class        element with class attribute
#id           element with id attribute
style         element with style attribute
!important    style property with !important override

specificity increases as we go down the list.
56 Likes

For example we have a 3 bdrm house, with no colors on the walls,.
So we gonna use class to make all walls white by default & we gonna use different id in that ā€œhouseā€ so we can add different features for those white rooms ??? did I get it right?

3 Likes

what if if an HTML element has a class and an ID attribute? Wich has the priority? In lesson 9/17 in CSS setup and selectors, thereā€™s an h1 element which has both. The class attribute tells the browser to make the content uppercase the ID attribute tells the browser to make it capitalize. In that case, after I added the ID, the content changed from uppercase to capitalized. It is normal?
If an ID attribute has a priority, why donā€™t we uses it all the time?

ID can only be used once in any document. There is greater importance, or specificity than a CLASS but for the most part we use it because of its uniqueness, not importance. In real truth we want our selectors to have the lowest possible specificity, not the other way around. Thatā€™s why TYPE has the lowest specificityā€¦ So it can be overridden.

We use class when we wish to identify a group of elements, of mixed type, and give them all properties they will have in common. Among them we may have a single element, typically a parent but not necessarily so, that we want to stand out from the rest, in which case we may give it an ID, but that wouldnā€™t be the only reason. Mainly our aim is make it unique from the others.

7 Likes

I have noticed that when I write idā€™s value inside single quotation marks (ā€™ ') I get wrong message. Is it mandatory to write everything inside quotation marks (" ")?

1 Like

HTML purists from days of old would have nothing but double quotes on attributes. Netscape came around and all of a sudden there were single quotes on attributes (viewing page source). The purists didnā€™t yield. To this day we see double quotes on attributes in source requests. Maybe not always, but enough to deem significance.

Bottom line, it doesnā€™t matter. Let the purists have their own preference. (My preference is double quoted attributes, even in generated HTML.)

4 Likes

Then why should we use two attribute in same tag whether we can use only one either class or id in h1 tag??

ID is meant as a global identifier. The fact that we can style with it is more a convenience than a rule. Styling with class is more the norm.

Essentially, there are two reasons to use ID, maybe threeā€¦

  1. fragment identifier
  2. unique parent container CSS selector
  3. unique high specificity CSS selector

Bottom line, only use ID when there is a need to create a global hook that is bound to the window object.

<article id="topstory">

</article>

#topstory {
    height: 240px;
    background-color: #dfdfdf;
    border: 1px dashed blue
}

topstory.onmouseover = highlight

function highlight () {
    event.target.style.backgroundColor = '#dfefff'
}
6 Likes

Roy comes in with the best answers as usual!

A really late reply/question to this thread.

Given the advice and learning in place for us learners to differentiate between 'class and ā€˜idā€™ attributes, is that due to a high incidence of poor standards in HTML code on the web?