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 trialMatthew Francis
6,967 PointsWhen 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
Treehouse TeacherHi 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!
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsThis might be just a distraction, but someone used an attribute selector to make a css keylogger and I thought it was pretty interesting: https://css-tricks.com/css-keylogger/
Matthew Francis
6,967 PointsMatthew Francis
6,967 PointsThanks! 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!
Can't we just create another class? and assign it to the elements
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
Treehouse TeacherJennifer Nordell
Treehouse TeacherMatthew 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?
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
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 Check out this article.
Matthew Francis
6,967 PointsMatthew Francis
6,967 PointsMakes sense! One more thing!
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
Treehouse TeacherJennifer Nordell
Treehouse TeacherMatthew 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
6,967 PointsMatthew Francis
6,967 PointsThanks you for clairfying!