-2

I want to know what is the exact difference between id and class in html and css.

I read somewhere that ids are unique and there can be only one element with corresponding id, and classes can be applied to many elements.

But I think this is wrong I have a code in which I have applied a single id to two elements.

<link type="text/css" href="main.css" rel="stylesheet">
</head>

<body id="header">

<p id="header2">Poster</p>

<p id="header2">Hello World</p>

</body>

</html>

and here is my css code

 
 p#header2{
 background-color:white;
 width:50%;
 height:50%;
 margin-left:25%;
 margin-right:25%;
 text-align:center;
 font-size:50px;
}

Could anyone please explain me???

RajSharma
  • 1,941
  • 3
  • 21
  • 34
  • 1
    The browser will not crash and burn if you apply the same id twice. You're still not supposed to do it. Easiest example: it breaks the Javascript call `document.getElementById('header2')`, it will never find the second item. You're simply asking for random problems, because ids are *expected* to only exist once. – deceze Jan 29 '15 at 08:14
  • There and a ton of questions like this around the site, search before posting. Also there are even more resources on this all over the web as it is a very common and basic knowledge . – Ruddy Jan 29 '15 at 08:16

5 Answers5

1

Here is the Explanation in detail.

Use a class when you want to consistently style multiple elements throughout the page/site. Use the ID when you have a single element on the page that will take the style. class is a type of item and id is the unique name of an item.

EDIT:

CSS doesn't care

Regarding CSS, there is nothing you can do with an ID that you can't do with a Class and vice versa. I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn't care.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ID's. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn't be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID's. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.

EDIT2:

The Documentation clearly shows that HTML required the ID attribute to be unique in a page:

This attribute assigns a name to an element. This name must be unique in a document. If you have several elements with the same ID, your HTML is not valid.

So in JavaScript, getElementById() should only ever return one element. You can't make it return multiple elements.

Well, you can have more than one element with the same ID, but you shouldn't - because the consequences of doing so is unpredictable, due to differences between browsers.

Community
  • 1
  • 1
Suhaib Janjua
  • 3,538
  • 16
  • 59
  • 73
  • Afaik, js will not crash but simple return the first element (wrt dom traversal) with a matching id attribute, ignoring all others. Still not recommend to violate the uniqueness contract, of course. – collapsar Jan 29 '15 at 08:22
0

ID: Id name must have 1.

<link type="text/css" href="main.css" rel="stylesheet">
</head>
<body id="header"> // ID
<p id="header2">Poster</p>
<p id="header2">Hello World</p>
</body>
</html>

Class: have multi tag using the same class name. And you can apply style for all class have name is "name".

<p class = "name">abcdef</p>
<image class = "name">......</image>
Hien Ngo
  • 253
  • 5
  • 18
0

The id attribute is meant to be unique and should contain a single identifier. The class attribute may contain a space-separated list of class identifiers allowing for cumulative application of css rules.

This is notwithstanding to css engines that do not complain on double ids.

collapsar
  • 17,010
  • 4
  • 35
  • 61
0

It's right:

The id of an element should be unique in the entire dom. The class can be applied to multiple elements.

In css if you use this syntax

.yourClass {
    color: white;
}

every element with class="yourClass" have the style color: white.

The id HAVE to be unique for different reason. The thing first jump into my mind its the use of jquery where you identify dom elements with the ID

Alist3r
  • 556
  • 3
  • 11
  • 27
0

Simple - id is the one that can be used only once and it will be unique. Scripts mostly use id's but it doesn't mean that id will only be used with js and not css. You can used a id as selector to in css.

While classes when two or more divs have the same styling so use class instead of increasing lines of codes.

Sydonia
  • 107
  • 5