Varför använda id element när class är bättre?
Hej,
Jag har en fundering över i vilket sammanhang man ska använda Id. Jag förstår att class är övergripande i CSS, men varför skulle man isånnafall använda id?
Tack på förhand!
ID selector have one special ability in the browser, that class selector doesn’t have. ID selector marked with “hash value (#)” in URL (http://domainname.com#categories), make a browser attempt to locate the element with an ID of “categories” in a web page and scroll the page to show that element.
Instead of a conclusion, we can say, that is a very good idea having both an ID and a Class selector on a single element.
Let’s see an example:
HTML
<ul id=”list” class=”number”></ul>
With an element, that have ID and class as a selector, we can style all elements with the same class and style specific element with a specific ID selector.
Hjälper det?
id ska vara unikt för varje element. Exempelvis om du vill göra något (med javascript) när användaren klickar på ett visst element eller om du vill ändra styles för ett precist element.
Som @emilg säger:
Ett och samma ID får enbart återfinnas 1 enstaka gång PER sida (t ex. en specifik .html fil), vilket underlättar identifiering av det som ID tillhör via ex. JavaScript.
T ex. via document.getElementById("id") där du kan hämta elementet direkt istället för att behöva loopa igenom alla element (som du hade fått göra om du använt document.getElementsByClassName) som har samma klass för att därefter hitta just det elementet du letade efter genom att försöka särskilja det på annat speciellt sätt.
Likaså som @jaculator säger så kan du via s.k. ankarlänkar i URL targeta specifika element på en hemsida genom att ange det specifika id-namnet efter en hashtag (#) i slutet av URL:en för sidan.
Klasser är till för att återfinnas flera gånger på en och samma sida, flera element som kan dela/ha samma stilar passar klasser bra för.
Flera element som ska dela samma beteende via JavaScript passar klasser bra till.
ID utöver absoluta URL:er som går till specifika sektioner på din hemsida, kan även användas lokalt i din HTML-fil för att skapa s.k. "lokala ankarlänkar" som ser ut som följer:
<a href="#id">My local link</a>
Som "scrollar" en användare till sektionen av sidan där elementet med id="id" återfinns.
Kan populärt användas för t ex. TOC (Table of Content) ifall du skriver långa artiklar där du vill ha en dynamisk innehållsförteckning som kan ta besökare direkt till specifika sektioner av sidan osv.
Och för detta behöver du inte ens använda ytterligare JavaScript kod :)
