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 CSS Foundations Selectors Class and ID Selectors

Claudia Restrepo
Claudia Restrepo
9,888 Points
Posted by Claudia Restrepo
Claudia Restrepo
9,888 Points

Benefit of using classes is not clear

Hello, I'm following this less again, and i don't understand the benefit in using the class.

This is my code, the difference between my code and the code in the less is that he adds a class in the footer, and i don't, but the result in the browser is the same. 

</div>
        <footer>
            Footer
        </footer>```

```CSS
footer {
    height: 100px;
    color: white;
    background: black;
}```

What are the benefits?

Thanks,
Claudia

3 Answers

Terryl Brown
PLUS
Terryl Brown
Courses Plus Student 11,137 Points
Terryl Brown
Terryl Brown
Courses Plus Student 11,137 Points

The footer tag can be used in many areas of a webpage. So by adding a class and targeting the class instead of the footer tag, you make sure you wont have any naming conflicts in the future. Say you decide to use the footer tag again, those styles for the footer selector in your CSS would be automatically applied to your new footer element and you would most likely have to over right them. So it's just good practice to use a class instead of targeting html elements as selectors.

Anyways, hope that helped a lil. :)

Baruch Velez
Baruch Velez
275 Points
Baruch Velez
Baruch Velez
275 Points

IDs are used mainly for PHP and JavaScript functionality as well as specific CSS styles to that ID. In the other hand, classes are used to minimize the repetition of code. For example, if you have 5 divs throughout your landing page and they all have the same border color, width, height, background, and font-size.

Instead of:

<div id="div1">
    <!--- TEXT --->
</div>
<div id="div2">
    <!--- TEXT --->
</div>
<div id="div3">
    <!--- TEXT --->
</div>
<div id="div4">
    <!--- TEXT --->
</div>
<div id="div5">
    <!--- TEXT --->
</div>

#div1, #div2, #div3, #div4, #div5{
    font-size:0.5em;
    background:red;
    color:black;
    border:1px #000 solid;
    height:auto;
    width:15em;
}

You can do something like: 

<div id="div1" class="divs">
    <!--- TEXT --->
</div>
<div id="div2" class="divs">
    <!--- TEXT --->
</div>
<div id="div3" class="divs">
    <!--- TEXT --->
</div>
<div id="div4" class="divs">
    <!--- TEXT --->
</div>
<div id="div5" class="divs">
    <!--- TEXT --->
</div>

.divs{
    font-size:0.5em;
    background:red;
    color:black;
    border:1px #000 solid;
    height:auto;
    width:15em;
}

This will make your code easier to reuse and if you add a 6th div later on, you don't have to go back to the CSS and add #div6 to the list, you can just add the class to the HTML and voila, it works.

EDIT: Also the good thing about classes is that you can add as many of them to done tag as you need, where as IDs are unique and the tag can't have more than 1.

Hopefully this clears up a bit. Cheers.

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Classes can be used on many elements with the same name, and Classes are good when you wanna select a specific element,

example: lets say you have 3 divs and you wanna specify just one of them,

<div>
</div>

<div>
</div>

<div>
</div>

and in the css you write

div {

}

then you will select everyone of the div elements, but if you add an class for example, the mid div like

<div>
</div>

<div class="div1">
</div>

<div>
</div>

You can specify that certain div in your css, like this

.div1 {

}

I hope that helped!

kind regards // erdrag