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
Cheryl Hurley
2,250 PointsWhy the selector string?
I'm interested to know why it's necessary to select something using a longer string, when it seems to me conceptually that you could select a class with just one selector.
For example, in this project we use...
.contact-info li.phone a to select the individual contact info lines. It seems to me that you could just select .phone and, since there's nothing else included in the .phone class besides a elements, that this would basically be the same thing.
I'm assuming, though, that for the sake of organization and specificity, we target as precisely as possible, in the event of adding additional content or reusing the class elsewhere on the site. Is this way off-base?
Additionally.. why do we use the .contact-info class--same reason? Why do we not say something like section.contact-info li.phone a for ultimate specificity?
I know this is sort of a rambling, the-sound-of-one-hand-clapping sort of question, but I feel like I don't have an extremely solid, easily applicable grasp on best practices here. Thanks!
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Cheryl,
I'm not sure if you were suggesting .phone by itself but that wouldn't work out because it would only select the element that has a class of "phone". It wouldn't select the link within that element which is what we're trying to apply the styles to.
.phone a would work though. I think that would work fine and not cause any conflicts on this particular project. .contact-info .phone a would also work. You could drop the li
Where .phone a might fail is if you also wanted your phone number in the footer so that it was available on every page. If you used similar markup in the footer as you do on your contact page then .phone a will end up selecting both of those phone numbers and you would have no way to style the two separately. I think this is what Kevin Korte was referring to about not being specific enough.
In that case, you may want to make the two class names different or you would have to use more specific selectors to differentiate the two. Like .contact-info .phone a and footer .phone a. Now we've differentiated between the two and can style them separately.
As a general rule, be as specific as you need to be but don't over-qualify your selectors.
There's probably a few reasons not to use section .contact-info li.phone a for ultimate specificity. A long selector probably isn't good for readability/maintainability of the project If you find yourself needing to use more than 3 or 4 selectors then look for a better way to do it by assigning a class or id somewhere.
Ultimate specificity is also ultimate work for the browser. The browser simply has to make more checks on a longer selector than it does with a shorter one to make sure it has selected the correct elements for styling. Selector efficiency isn't really something you need to worry about though unless you are working on a high performance website.
I agree with Kevin that you're asking a good question here and have a good understanding of it. Curiosity is a necessary trait to have if you're going to be good at this.
Kevin Korte
28,149 PointsYou're pretty much dead on. There is a fine line to walk with specificity. To specific and the selectors can start to become a nightmare to maintain, especially as the code base grows. However, if your too unspecific, you could inadvertently select elements you didn't mean to do.
There isn't a one size fits all answer here IMO. But you have a good understanding on it, and you're asking a good question.
Cheryl Hurley
2,250 PointsIt's making more sense the more I do. I'm seeing more and more things that couple apply to inadvertent elements if you're not specific enough. I guess it's just one of those "art" elements of the science that I love! Thanks Kevin
Cheryl Hurley
2,250 PointsThat's definitely a lot of information, but I think I'm getting a more natural handle on it, thank to you guys. I've been "hacking" at CSS/HTML since I was a little kid without really understanding the theory behind things, so I think to do things right, I have to ask a lot of questions. Obviously. I've been loading the forums up! Thanks for being so helpful and totally without attitude!