2

I was going through CSS :Class and ID . And I wont felt any differnce between them when I tried the examples given by them.

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<h1 id ="para1">Hai</h1>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

gives me the output as I wish where the say The id selector is used to specify a style for a single, unique element.

Am I looking to this in a wrong angle ?

8 Answers8

7

One uniquely identifies and the other classifies.

In the first case, it is nonsense to call two things to same thing.

In the second case it is common to want to give a group of things the same look and feel.

In the context of CSS, you should only rely on classes. Validators of CSS should balk at using ids for applying styles. You can still define a unique style used by only one distinct element.

Grant Thomas
  • 44,454
  • 10
  • 85
  • 129
  • 1
    id is an element's social security number (by the id you can always point to the one and same element) ... and the class is like a family name - all that share it can share a treat =) – Martin Turjak Mar 12 '13 at 09:10
  • @ACB How is explanation of this concept a black out? It's obvious that a household of Johns will be confusing to target any single one, just as obvious as we see families are grouped (classified) by their surname (generally, and for example). This whole thing is just an idea. I don't know how any thinking human cannot get that. – Grant Thomas Mar 12 '13 at 09:24
6

First of all, w3schools is a terrible resource. It is badly written, cluttered, unfocused, and frequently misleading. You should use this much better set of resources at the Mozilla Developer Network instead (it sets out to achieve the same thing).

Your example doesn't use classes at all. You have CSS invoking an ID, and 2 HTML elements with that ID (which you shouldn't do — IDs are supposed to be unique!). The key difference between the 2:

  1. IDs reference unique elements. There should only be 1 instance of any 1 ID. Classes can be applied to many elements and an element can have multiple classes
  2. A CSS rule using an ID will override a CSS rule with a class if they both try to assign the same properties.
  3. IDs are used for all sorts of native applications: anchor references, forms, iframes, whereas classes are used purely for styling with CSS.

I modified your code as an example of these points. Here's some of that code using classes for reference:

.paragraph {
    font-style: italic;
    color: green;
}

And the HTML:

<p id="para1" class="paragraph">Blah blah blah</p>
Palak Jain
  • 664
  • 6
  • 19
Barney
  • 16,181
  • 5
  • 62
  • 76
  • 1
    [Check out the example in this link](http://jsfiddle.net/barney/ThQLB/): here I've added a class rule to the CSS and added that class to the `

    ` tag. The italic property from the class rule is being applied, but the color is being overruled by the ID rule you wrote earlier. This demonstrates point 2. I also removed the ID from the `

    ` element, making the page valid as per point 1. To demonstrate point 3, here's a link to my answer on this page, using its ID in the URL: http://stackoverflow.com/questions/15356660/difference-between-id-and-class/15356814?noredirect=1#answer-15356814

     – Barney Mar 12 '13 at 09:00
  • +1 Its great. you can add this to answer for easy access and for a good answer. But I am stuck on 1.why removed ID from `

    `?

     –  Mar 12 '13 at 09:06
  • 1
    Because each ID should represent a unique (single) element on a page. This is important for non-CSS functionality when you need to identify something specific and unambiguous: the link I posted above has `#answer-15356814` at the end of it, which means go to the URL, then find an element with ID `answer-15356814` and scroll down to it. If there were several, which should be scrolled to? This is also important for form inputs to communicate to servers, among other things. – Barney Mar 12 '13 at 09:12
  • You might want to edit that to: "There should only be 1 instance of any 1 ID" per page, just to be precise. Also, plus 1 for hyping MDN over W3S – symlink Sep 22 '19 at 00:44
1

You can use both to style an element, but there are few differences:

  • there can be only one element with given id, but many with given class
  • id selector is counted as 100 during CSS precedence calculations, when class selector is only 10
MarcinJuraszek
  • 124,003
  • 15
  • 196
  • 263
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.

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
1

The way you have IDs that differentiate one person from another is the same way it works in CSS, just like a special mark you give an item so you don't confuse it with another, that's how IDs work in CSS, more than one items cannot share the same ID

Helen_CEE
  • 39
  • 3
0

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

devolasoji
  • 1
  • 1
0

A class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Though css may not really care about the uniqueness of ID, but JavaScript will, that's why when you are dealing with Document Object Model in JavaScript, if you want tp select an html ID, you use document.getElementByID(), note the "Element", while for class, you use document.getElementsByClassName() this one has "Elements".

AbdQaadir
  • 81
  • 1
  • 2
0

ID is unique for an element, there can be only 1 ID for an element. Classes can be applied to many elements and an element can have multiple classes at the same time

Adeyemo Adedamola
  • 1