Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

Divs Vs Classes?

Div's have an attribute id and each id attribute needs to have a unique name in order to make multiple div elements

whereas classes can have the same name and still produce multiple elements?

Are these the only differences or are there more I am not aware of?

2 Answers

Jacob Rigby
PLUS
Jacob Rigby
Courses Plus Student 366 Points
Jacob Rigby
Jacob Rigby
Courses Plus Student 366 Points

This is very simple to understand :-

id is used when we have to apply CSS property to one attribute only.

class is used when we have to use CSS property in many locations within the same page or different.

General :- for unique structure like staring div and buttons layout we use id .

for same CSS throughout the page or project we use class

id is light and class is little heavy

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

Well, For Example,

<head>
<style>
#select {
    max-width:100px;
    border-right: 2px solid black;
}
</style>

</head>



<div id="select">
<p>HEloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>

<div id="select">
<p>Helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>

Above code has two <div>, and both of them have same IDs instead of having same classes. Now I could have same classes assigned to both but here I can see, it does not make any difference, I have either classes or IDs they produce same results! Then why we have two things classes and id?

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

You can use the same ID on multiple elements but it is bad practice. If you try to select that element with JavaScript it is only going to return the first element it finds with id="select" ignoring the rest. This is going to make your HTML harder to work with via JavaScript.

<div id="deal-with-it">deal</div>
<div id="deal-with-it">with</div>
<div id="deal-with-it">it</div>

<script>
var el = document.getElementById("deal-with-it"); // returns only the first one
</script>

Also, you often want to apply more than one class to an element. 

<div class="all-caps float-right">Whatever</div> <!-- CSS works -->
<div id="all-caps float-right">Oops</div> <!-- no CSS happening -->

HTML is markup and should describe the parts of the document. When you use a class you say these elements all have something in common - a background color, a font, a kind of positioning, etc. An ID is marking the element in a particular way to stand out.

And so it makes sense that IDs have a higher specificity than classes. You can take advantage of that for more fine grain control, and leave classes intact for general things.

This will help your stylesheets stay DRY. You can use IDs for their specificity and ease of access with JavaScript.