Jump to content

Difference between id and class


Recommended Posts

Hellooo.. :DCould you please tell me the difference between id and class?I think that it is the same..Take a look ! Using ID :

 <!DOCTYPE html><html><head><style>#center{text-align:center;}</style></head> <body><h1 id="center">Center-aligned heading</h1><p id="center">Center-aligned paragraph.</p> </body></html>

Using Class :

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head> <body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p> </body></html>

I see there's no difference, but in w3schools.com,It says that The id SelectorThe id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#". The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.This allows you to set a particular style for many HTML elements with the same class.The class selector uses the HTML class attribute, and is defined with a "." But, i think the id selector can also be for a group of elements.. Please explain this ! :D

Link to comment
Share on other sites

It can, but it should not. It's just the rules. It's improper to use ids for multiple elements. Id also can be called from the URL unlike classes. Ids are identifiers, classes are a class of style. Ids are also called for DOM, js, etc. So many reasons to explain. Just follow the rules.

Link to comment
Share on other sites

Yup, classes can be applied to multiple elements on a single page, whereas ID's can only be used once on any given page. ID's are also used to allow JS to identify a certain element. For example, if you want to grab an element with a certain ID and perform some sort of action on that element, you use JS to identify it like so:

<div id="element_id"></div>

var element = document.getElementById('element_id');

P.S - you don't have to save it to a variable, you can perform another action such as writing innerHTML to the page like:

document.getElementById('element_id').innerHTML = someValue;

Hope this helps, Kind regards, Lab.

Edited by Labtec
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...