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 Styling Web Pages and Navigation Polish the Navigation and Footer

Miguel Rodriguez
Miguel Rodriguez
2,492 Points

#gallery li a p {} vs nav a {}...why do we specify path more clearly on #gallery but don't have to say nav ul li a {} ?

Just trying to understand the logic on our CSS page, why can we say:

nav a

but cannot say:

gallery p (instead having to write #gallery li a p)

Steven Parker
Steven Parker
222,348 Points

Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community. :arrow_heading_down:

2 Answers

Steven Parker
Steven Parker
222,348 Points

In CSS, specificity controls precedence.

So while "#gallery li a p" might target exactly the same elements as "#gallery a p", the first rule will take precedence over the second even if it comes earlier in the CSS. Otherwise, there's no point to including the li, since the #gallery element is a list, and all children of a list are li elements.

So while it might not be necessary to be very specific to select the correct elements, more specificity might be desirable to establish precedence over other rules that target the same elements.

Hi Miguel,

Well, it is always good to be more specific. No harm in that. In fact, to me, that is a better practice.

In this particular case, Inside gallery id, there can be another p elements. There might be nothing now, but, in future, you or someone else, modifying your code, can have another <p> element and that is very much possible. So, its good to be specific as p elements are very common.

Now, the nav element has very common structure containing ul -> li -> a. So mostly, there won't be any additional <a> tags and if there will be any, we definitely want the same styling for that also.

Hope it will clear your doubt.

changed comment to answer