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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Alex Hird
Alex Hird
2,767 Points
Posted by Alex Hird
Alex Hird
2,767 Points

Nested elements info plz

Hi,

When inputting declarations for class phone, is there any reason why this selector couldn't be .phone {} instead of the below which shows the path via nested elements. There isn't another .phone class anywhere so is it simply good practice to be specific about where it is i.e. what nested elements it is in. Thanks,

.contact-info li.phone a {

3 Answers

Joey Ward
PLUS
Joey Ward
Courses Plus Student 24,778 Points
Joey Ward
Joey Ward
Courses Plus Student 24,778 Points

If you need to target the anchor inside the class, just target like this:

.phone a {}

Alex Hird
Alex Hird
2,767 Points
Alex Hird
Alex Hird
2,767 Points

Thanks Joey, much appreciated.

André Teodoro
André Teodoro
4,746 Points
André Teodoro
André Teodoro
4,746 Points

Hi Alex,

What is the element that you want to be affected by the CSS? Only the "phone" class or the anchor within that class?

Alex Hird
Alex Hird
2,767 Points
Alex Hird
Alex Hird
2,767 Points

Hi Andre,

It is the actual anchor within the class, therefore I hope i'm right in assuming that it needs to be specific otherwise the CSS wouldn't actually affect the element.

Joey Ward
PLUS
Joey Ward
Courses Plus Student 24,778 Points
Joey Ward
Joey Ward
Courses Plus Student 24,778 Points

If the is the only place you are going to use the class "phone", then there's no reason your CSS selector has to be so specific. You can just target .phone{} without referencing the parent elements it's nested inside of.