Understanding the notion behind selectors:

If you’ve reached this page, there’s a high chance you have some idea of how CSS works. The idea behind Cascading Style Sheets – that style can be defined for certain elements or sets of elements, without having to include attributes to your HTML code all the time and making it unreadable and hard to decipher. But still, CSS has to rely on something to know how and where to apply the style changes. And to understand how to do that properly, you must understand the difference between div id and div class.

So what are those things we’re talking about? Well, as stated before, to know where CSS should apply changes to style, it needs something called selectors. Selectors are the “hooks” to which styles apply, something that says “here I am” to the browser when taking care of proper displaying of your page.

Basic Definitions :

The ID attribute is used in this way in the HTML code:

 <div id=”item”> Hey!  </div>

And in the CSS it’s defined as:

 

#item
{      color:green;
}

 

(This is only an example, you can type in anything as parameters for the styling)

To the contrary, div class is written like this in HTML:

<div class=”item2”>Hey!</div>

And it’s defined in CSS in the following way:

.item2
{      color:red
}

The Differences between Div id & Div class:

So let’s go to the point of this article – what are the differences and why does that even matter to you ?

The main and most crucial difference is that div id can only be used once due to the fact that it was created to allow addressing only one element, while div class can apply to many different elements. In short, IDs are exactly what you would expect them to be – unique identifiers to just one element.

Now that’s not to say that you can’t write two exact same IDs to two different div tags, but that will make your code non-compliant to several standards, and there’s no telling how badly things can go wrong if you are not careful with that.

Classes on the other hand, allow the coder/designer to add the same characteristics to an element, that means that you can have a hundred elements which you want to share the same outlook , and you can make that happen through the use of a class. This is extremely helpful with menus for example ,where you have lots of items and you need to make them similar, without touching the rest of the site.

But what if an element has both an id and a class?

In such a case, the id takes precedence , because it has more importance by default. So for example, using this you can put the class on all the items of your menu, but have only one item be an exception by defining it with an id. This is one of the most important ways the id is used – to define exceptions for elements that you need different from the normally defined, and thus achieve true cascading.

Uses of div id and div class :

Most designers will give you the tip to use classes more often with CSS. That is somewhat practical advice, since you don’t want to risk having duplicate IDs , but to be completely true to fact – CSS doesn’t care if you use class or id. You can have a class for a single element, that’s ok as an idea.

However JavaScript acts profoundly different around the idea of ID and class. Many JavaScript functions rely heavily on the fact that IDs are unique. IDs make it easy to pass parameters to JavaScript, and allow it to control exact elements. So IDs are more important to JavaScript, even though it can use classes , if there’s a necessity to process several objects in the same way.

Knowing the basic differences between class and id , you can make your site work well with the code you use, you can make it compliant with standards and modern browsers, and you can have responsive easy to read CSS which also provides the styling you need. Be very careful to use id and class for what they’re appropriate, and you’ll achieve good results.