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 Selectors Selectors - Beyond the Basics Attribute Selectors

Matthew Francis
Matthew Francis
6,967 Points

When to use Attribute selector vs a class?

Instead of using an attribute selector, why not just use a class or an id? Isn't an attribute selector more slower to read rather than a class/id?

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Matthew Francis! You are not the only one to ask this question. In fact, even the CEO of Treehouse asked this question. And from what I gather from the brilliant answers there, the idea is that you might have a class assigned to multiple elements that aren't of that type. The HTML may not be written by you at all. There may already be over-use of class assignments and you need another way to select just those items.

I highly recommend the top rated post by Steven Parker on this thread.

Hope this helps! :sparkles:

Matthew Francis
Matthew Francis
6,967 Points

Thanks! I've read the post, and the biggest thing I've got was that if you are don't want to add a class to each element, you could always use the attribute selector. But I'm not sure, if that's good practice, it seems more convenient, but doesn't attribute selector slow down the reading process?

Also!

you might have a class assigned to multiple elements that aren't of that type.

Can't we just create another class? and assign it to the elements

There may already be over-use of class assignments and you need another way to select just those items.

How many class assignments are usually enough? what's the golden rule before it becomes too much?

Also! when building something from scratch, would you always stick with class/ids? When should I use attribute selectors instead?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Matthew Francis there is no performance difference at all and you can confirm this here.

Personally, when I am building a project all by myself I stick to classes and ids. That is my preference. But again, you are assuming that you are writing all the CSS and HTML yourself. What if you are on a team with 8 other front-end developers and the HTML is generated on the fly? :smiley:

Sure, you could create another class, but remember, if it is the same class name as a previously written rule (by someone else on your team), you won't get any warnings or any errors. It will just very gracefully override their rules for that class. So there, you have the possibility of colliding rules. As Steven points out, this would probably be more easily understood on a large scale project and one where you are not the only developer.

They are just giving you another tool to put in your toolbelt if you need it :smiley:

edited for additional reference

I found another reference that actually times attribute selectors and class selectors and you can see the results in milliseconds. The result: in some browsers it's slightly slower, but in some it's actually faster :thumbsup: Check out this article.

Matthew Francis
Matthew Francis
6,967 Points

Makes sense! One more thing!

Sure, you could create another class, but remember, if it is the same class name as a previously written rule (by someone else on your team), you won't get any warnings or any errors. It will just very gracefully override their rules for that class. So there, you have the possibility of colliding rules.

Wouldn't that also apply for attribute selectors? If you have a background:red in a class, and a background:blue in an attribute selector; the background would override to be blue, correct? If so, dosent the attribute selector have the sameee flaw as the class?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Matthew Francis yes, it would. I'm just saying that you might have a use case for it. Imagine that someone put a class on certain things that has quite a few rules. And on about half of the items, you want to have a blue border when hovering over it, but not all of them. Specifically, you want only the items that have a certain attribute. Now imagine this CSS isn't on one page. It's on hundreds of pages. Is it more realistic to attach a class to dozens of items and just exclude those few or just select the attribute?

Matthew Francis
Matthew Francis
6,967 Points

Thanks you for clairfying!