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
Fatimah Sahid
3,188 PointsGood day, why was it not ok to just stop at '.contact-info li.phone' when trying to set the list icons, why add the 'a'?
When we made css settings for the links, we used '.contact-info a' and set the padding and other things for all the links. So if we are trying to access the specific list items and each already has a class to identify it, why was it not sufficient to say 'contact-info li.phone {}, 'contact-info li.mail {}, and so on, why did we have to put 'a' again? Thank you.
1 Answer
Holt Hunter
4,629 PointsI took the "How to Make a Website" course too, and the reason we put .contact-info li.phone a {} and .contact-info li.mail a {} is because we
were assigning background images to the links so when you would click on the icon it would also act as a link. If we had left out the a then the icon would not have been part of the link. Hope this helps.
Holt Hunter
4,629 PointsHolt Hunter
4,629 PointsIt is mainly just for the user experience.
Fatimah Sahid
3,188 PointsFatimah Sahid
3,188 PointsThanks Holt, but I tried removing the 'a' and I found the images still link, but also that the images repeated. That was interesting, because 'no-repeat' has been set for the anchors enclosed in the lists already. There has to be some other reason. It seems adding the 'a' means the images been styled by the list element classes take on the image settings declared for the anchors in ' .contact-info a '. I am still not sure.
Fatimah Sahid
3,188 PointsFatimah Sahid
3,188 PointsThanks again for helping out Holt, but I have now understood the reason why: We needed to specifically target the anchor elements in each list element since each one has a different image. The rules can therefore not be addressed generally as in 'contact-info a' .