Class & id

Where i can uniquely style a HTML element giving an unique class name, So whats the point of id to use? I can do the same thing using unique class name instead of using id.

Hello @fabifahim, welcome to the forums! You are correct that ids and classes are for styling in CSS. You use a class when you want to style mulitiple elements the same way:

<div class="class1">
  <p>hey</p>
</div>

<div class="class1">
  <p>you</p>
</div> 

In this case, since both of the elements with the same class are the same, I might want style both of these divs the same (but say, want other divs to look different).

Ids are more important selectors, which means that anything styled with an id will be overpower, so to speak, anything with a class. For instance, if you were to have the following code:

<div class="hi">
        <p>hi</p>
        <p id="h">hey</p>
    </div>

And you styled it this way:

#h{
  color: aqua;
}

.hi {
  color: antiquewhite;
}

Then the <p> with an id of h would still be aqua. It also signals to other developers that what a specific section is important/styled in a specific way.
I hope this helps!

[quote=“codeneutrino, post:3, topic:498396”]

<div class="hi">
        <p>hi</p>
        <p class="h">hey</p>
    </div>

.h{
color: aqua;
}

.hi {
color: antiquewhite;
}

won’t it give the same output as your written code ?

Yes, it would, but I was just trying to put a situation where, if the code was more complex, an id would be useful. Also, there is a convention for using ids/classes. Generally, if you only have one instance of something, you can have an id. Ids are also used in JavaScript, when you add functionality to your website. (Sorry, my first example was quite poor in demonstrating anything).

No it was okay. Your explanation was transparent to understand. But I am just trying to understand the purpose of id tag where i can fulfill my demand only by using class tag. Can you give me such an example that where class tag can not give me my desirable output. To get my desired output id tag must me used ?

Can you give me such an example where class tag can not help me in anyway. To get my desired output i must use id tag.

It doesn’t work like that. In programming, there are often multiple ways to achieve something. Doesn’t mean all solutions are equally good.

In the future, you might add JS to your site. JS works very differently with ids (which give a single element) while classes give a array of elements, even if there is only a single element with that class on the page.

Programming comes in two steps: learning a concept (like here, learning id and classes) and building projects, where you start to see why we have these two different implementations.

1 Like

Oops! It seems you get annoyed with my questions. I am a new learner at codecademy . I am just trying to clear my basics with the questions.
Thanks for the reply.

1 Like

No, absolutely not annoyed. We have all started from scratch, I had similar question like you in the beginning. The problem is that, we can’t give you a clear example. You will have to create that yourself, which will come once you will start building your own projects.

We can tell these things, that ids allow you to structure your code more nicely (like @codeneutrino did), but in the beginning its really difficult to see why this is important. You will, once your projects starts to grow. Or once your start to collaborate with other developers, that if you use a class, another developer might add another. Because he thinks the class can be re-used. (with ids, this is less likely to happen, given the other developers know ids should be unique)

Thank you for the response.
@codeneutrino
@stetim94

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.