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 Basics (2014) Basic Selectors Reusing Classes

Posted by eric zhou
.a{fill-rule:evenodd;}techdegree
eric zhou
Front End Web Development Techdegree Student 381 Points

When to use type selector, id selector, class selector

I know that type selector target all the HTML tag with the same name, same with class selector, id selector is better use to format a specific element

However, is there a preference over using class selector over type selector in standard practice? id over type? ore the other way around? because in the video, we can just use h1 to format the main header, but the instructor use a class selector. same with footer(can just use footer tag, but the instructor use an id)

1 Answer

Zak Erving
Zak Erving
22,832 Points
Zak Erving
Zak Erving
22,832 Points

It's true, you could style an entire website/application using nothing but element type selectors. However, type selectors are incredibly inefficient rendering-wise, and when used in a large application, you risk freezing the user's browser while it combs through all of your element tags and applies the appropriate rules (I've experienced this before on an enterprise application). Additionally, you risk backing yourself into a corner with this convention. Do you really think you can target every div with pinpoint accuracy, and—even more importantly—can you structure your markup in such a way that someone coming after you will be able to adhere to your standard?

In short: use class selectors for "like" elements, ID selectors for unique elements that depend on JavaScript, and type selectors almost never—but if you do, at least try to use an attribute pseudoclass.