What is the difference in id and class selectors?(by example)

Question

https://code.sololearn.com/WnIe7iltC8CR/?ref=app

Answer 1

@Born To Code, I didn't notice you used it twice, by right there should only be one element having a distinct Id inside a HTML document, if you want to implement a CSS rule on multiple elements use class instead of Id.

You'll understand this as soon as you begin JavaScript course where you'll be manipulating DOM element, to get a reference to a distinct element JavaScript uses a function named getElementById, which accepts a string indicating a unique element's identifier. The function is supposed to return one element for your JavaScript code to work with. Now imagine if you have multiple elements by the Id, it'll be confusing.

Contrary, class rule can be implemented for multiple elements because JavaScript uses the function getElementsByClassName which returns multiple element references, each reference represents an element that applied the aforementioned class.

Hth, cmiiw

Answer 2

@Born To Code, no problem mate, I help when and where I can :)

Yeah, that's great, good luck with the CSS & JavaScript course too.

Everyone here in SL are considered my friends, as long as they don't go naughty, it's better to have friends, and sad to have enemies.

Peace be with you mate :)

Answer 3

CSS rules by class can be implemented on many items, while the Id is unique, it can only be implemented on one and only item in the document, you can't have more than one element having the same Id on a document.

Your code already explained the concept, one element with unique Id and multiple elements with same class.

Hth, cmiiw

Answer 4

@lpang still didn't understood! what is the meaning of id implemented only on one and only. but i used it two places so still didn't understanding answered of difference!

Answer 5

@lpang first of all, thank you for cleared this misunderstanding.

anyway i will start learning javascript after css which is i am learning now😊

friends?
we can be gud friends 😉😊

Answer 6

@lpang cool😊 ill try not to be naughty hehehe just kidding

Answer 7

keep a note of this.

Id selectors in CSS begins with a # (followed by the name). Whereas, class selectors begin with a .(followed by the name).

Answer 8

hey!

Answer 9

hi