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

Miguel Rodriguez
Miguel Rodriguez
2,492 Points
Posted by 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
229,732 Points
Steven Parker
Steven Parker
229,732 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.

Taraj Shah
Taraj Shah
21,073 Points
Taraj Shah
Taraj Shah
21,073 Points

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.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

changed comment to answer