difference between id & class

what is difference between id and class in div?

 

Well ID's are unique wherein you use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them.

Coming to Class they are not unique and it can be used multiple times in the same HTML document.

 

In simple terms, you can have any number of people with red hair (class="redhead"), but only one person may have a given driver's license number (id="dl01019204").

cheers,

gary

 

I think a better question than "what's the difference" would be "what are they for" -- you'll get lots of short answers on the former, but even most experienced developers plod along blissfully unaware of WHY we have each of them and why they exist.

Classes exist for targeting for style with CSS. That's what they were created FOR. That's why they aren't unique -- you can use the same class on as many elements as you like to apply style. While people have started using them the past few years to target elements with javascript, that's not really why we have classes.

That you can target elements in CSS using ID's on the other hand is more of a happy side-effect. ID's exist for targeting unique elements in HTML, JS and CSS. The ways you can leverage it are as follows:

1) "hashes" -- If for example you had this:

<div id="top">

You can refer to it with a hash thus:

<a href="#top">Go to Top</a>

Basically letting your DIV#top perform the same function people used to waste code saying <a name="top"></a> on doing. For this reason I like to make all my major unique page sections be declared with ID.

2) LABEL's "FOR" attribute.

If you make a label inside your form:
<label for="loginUsername">UserName:</label>

and have your input this:
<input type="text" name="login[username]" id="loginUsername" />

It establishes a semantic and accessibility relationship between the label and the input -- an example of which would be that if you click on the label, it will focus it's associated input... If that input was a checkbox, clicking on the label will check/uncheck the box, creating a larger selection area.

3) Javascript targeting

element.getElementById -- existed from day one of Javascript, and remains the cornerstone of how most scripts work. While again, they have added getElementsByClassName as an option, and people have coded their own equivalents for over a decade, that's not really what classes were invented to do.

Again, that you can also use ID's as CSS selectors is more a happy 'extra'. Sad part is, many developers have no clue on those first two uses I listed for ID's.

Basically, you can do more with ID's, but as others said they're unique, can only exist once on the page. Classes can be used over and over again, but don't have as much functionality 'out of the box'.

One bit of advice on classes - avoid using them "just because" or strictly to apply presentation; in CSS we have this thing called "inheritance", USE IT. You'll often see idiotic halfwit markup like:

<div id="mainMenu">
	<ul class="menuUL">
		<li class="menuLI"><a href="/" class="menuA">Home</a></li>
		<li class="menuLI"><a href="/links" class="menuA">Links</a></li>
		<li class="menuLI"><a href="/forums" class="menuA">Forums</a></li>
		<li class="menuLI"><a href="/contact" class="menuA">Contact Us</a></li>
	</ul>
</div>

Code (markup):

Why do I call it idiotic halfwit nonsense? If you have an ID or class on an outermost container, and EVERY tag inside it is getting the exact same class, NONE of them need classes!!! Also, UL is a perfectly good block level container, so why the extra "DIV for nothing" -- 99% of the time you see code like that, there's no reason for it to be much more than:

<ul id="mainMenu">
	<li><a href="/">Home</a></li>
	<li><a href="/links">Links</a></li>
	<li><a href="/forums">Forums</a></li>
	<li><a href="/contact">Contact Us</a></li>
</ul>

Code (markup):

We lose the 'div for nothing' around it since again, UL's a perfectly good block level container... so

Original | Rewrite
#mainMenu and .menuUL == #mainMenu
.menuLI == #mainMenu LI
.menuA == #mainMenu A

That's why when you see this absolute dumbass ignorant "I can haz intarnets" BS markup:

<div id="nav_row" class="main_nav fix">
<ul id="menu-top-nav" class="main-nav nosearch sf-menu"><li id="menu-item-550" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-17 current_page_item menu-item-550">

Code (markup):

You need to find who wrote it and punch them in the face.

 

The main difference in class and Id is that you can use class more then one time on a html page, but id use only one time in html page.
In style and Java script before class we use dot "." for id we use hash "#".

 

okk.thanks now i understood better.

 

Good. Do read and study deathshadow's answer, too. Understanding why they exist and how they're best used will cause you to write better markup, more efficient css, and simplify a lot of javascript issues.

cheers,

gary

 

The class allocate you to situate a style for several HTML elements with identical class name.
The ID is used for identify a style for single and exclusive element.

May this help you.

 

The main difference is id's are unique but you can give one class to lots of element.

 

thanx to you for answer.
I can ask 1 question to you?what is style?

 

What things look like -- aka your CSS. "Cascading Style Sheets"

One of the hardest concepts to grasp in 'modern' coding practices (I put that in quotes because most people seem to consider shoving your head up 1997's rectum to be "modern" -- see HTML 5 and HTML 4 transitional) is that if you are choosing your HTML tags based on what their default style (appearance) is, you are choosing the wrong tags for ALL the wrong reasons. Choosing a tag based on it's default appearance is, by definition, "presentational markup" -- a relic of the worst practices from HTML 3.2 that it's been a long hard fight to try and stamp out.

HTML -- semantic markup of content; semantic meaning that everything in your markup should say what things ARE, even your presentational hooks. It's ok to use a DIV or classes or ID's to apply presentation/style/appearance (three words, same thing), but you should say WHY it's getting an appearance, NOT what that appearance is. For example:

<div class="red">

... is bad as you're not saying WHY it's red... and you might not want it red in some future skin. If you can't come up with a semantic reason for why it's red (highlighted, standout, error) it probably shouldn't be! There's a bit of asshattery out there right now called "OOCSS" -- the above is WHY I call it asshattery as by it's very nature you're using presentation classes to say "column" or "left" or some other PRESENTATION that probably doesn't apply to all the possible media targets. Same goes for grids and most "CSS Frameworks" -- they miss the entire point of semantic markup and why CSS even exits!


CSS -- what things look like. The advantage of keeping appearance separate from content being you can create multiple layouts and styles for ONE set of markup (HTML/content). That's why for those of us who've been practicing semantic markup, separation of presentation from content, and elastic semi-fluid layout, the new 'responsive layout' built with 'media queries' is the next logical step and a complete no-brainer -- while for everyone else it's a confusing mess that they sleaze out broken pages using frameworks; as they missed all the steps between point A and point B.

 

I'm pretty sure he meant to refer to the selector, not the style or style sheet. For example, in your style element or in the external stylesheet file, you might want to apply a ruleset to a particular class of elements, thus:

p.redhead {
  font-family: cursive;
  }

Code (markup):

Or for an ID selector or link target:

p#br549 {
  color: red;
  }

Code (markup):

html

<a href="#br549">the funny paragraph</a>

Code (markup):

They are not for javascript.

cheers,

gary

 

That part had me scratching my head too, but that's part of why my advice is to ignore broken engrish one-sentence wonder ****'s; usually they have no clue what they're saying in their own language, much less English.

... unless they meant jQuery, not Javascript, since you can use CSS style selectors there.