what is main difference between class and Id?

[sunilmkt]

This very common question which are asked. I want the main difference with example.

[L0adOpt1c]

Class can affect several elements.

ID is typically used for a single element, though you can use it on several elements.

Id:

#id1 {
text-align:center;
color:blue;
}

Class:

.colorcode {
color: red;
}

Classes begin with '.'
ID's begin with '#'

Hope this helps.


Here's a helpful link:
http://w3schools.com/css/css_id_class.asp

[jerry62704]

An "id" is unique and applies to one and only one element on the page. A "class" is not unique and can apply to none, every or some elements on a page.

CSS
#unique {color: red;}
.notunique {color: blue;}

HTML
<div id="unique">
...
</div>

<div id="unique2" class="notunique">
<p class="notunique">
...
</p>
</div>

The "#" denotes an id in the CSS, but is not used in the HTML. The "." denotes a class in the CSS, but is not used in the HTML.

[VIPStephan]

Also, IDs can be used as anchor hooks to link to, e. g.:

<a href="#example">link</a>
…
…
<div id="example">clicking the link above brings me to this element</div>

And in CSS, IDs have a higher specificity (“importance”) than classes.

[DanInMa]

Originally Posted by L0adOpt1c

Class can affect several elements.

ID is typically used for a single element, though you can use it on several elements.

You should read the page you linked him..

The id Selector

The id selector is used to specify a style for a single, unique element.

[L0adOpt1c]

Originally Posted by DanInMa

You should read the page you linked him..

And you should check your facts.

And am I not correct in saying that you CAN use them for several elements?

It's possible. I've done it.

[VIPStephan]

Originally Posted by L0adOpt1c

And am I not correct in saying that you CAN use them for several elements?

You can but I think it was a misunderstanding between you two. The way you said it could be used could be misunderstood that it can be used for several elements in the same document which is definitely wrong. It can generally be used on almost all HTML elements, that’s true, but an ID must occur only once per document.

[xhtmlchamps1]

The 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 style rule below will be applied to the element with id="para1":

Example-

#para1
{
text-align:center;
color:red;
}

Now for Class-

The 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.

Example-
.center {text-align:center;}

[DanInMa]

Originally Posted by L0adOpt1c

And you should check your facts.

And am I not correct in saying that you CAN use them for several elements?

It's possible. I've done it.

No you are not correct. You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.

Id's are and always have been meant to be unique. Sorry, you are incorrect.

[L0adOpt1c]

Originally Posted by DanInMa

No you are not correct. You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.

Id's are and always have been meant to be unique. Sorry, you are incorrect.

Sorry, but the person before was correct. Of course you can't use one ID multiple times per page, you can use them across several pages on one website.

[felgall]

Originally Posted by DanInMa

You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.

It isn't just from JavaScript that specifying multiple copies of the same id breaks. It also breaks in HTML when you link to it.

If the web page were the world and the id was "Birmingham" and you needed to go there - which Birmingham would you go to?

<div id="Birmingham">England</div>


<a href="#Birmingham">go to Birmingham</a>


<div id="Birmingham">Alabama</div>

Almost all of the functionality that applies to ids relies on the fact that there will be only one.

[felgall]

Originally Posted by yguyfan

you can use them across several pages on one website.

No one has claimed that you can't. It was the claim that you can use the same id multiple times in the same page that was being refuted.