Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
Joey Ward
21,953 Points

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

.phone a {}

Alex Hird
Alex Hird
2,767 Points

Thanks Joey, much appreciated.

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

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
Joey Ward
21,953 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.