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.
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.
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.
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.
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?
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.
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 (" ")?
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.)
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?