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
Frank Chi
2,017 PointsWhat is the difference between selecting nav a and nav li? Since nav li seems to only contain nav a, what's different?
I do see a differences when I apply the font weight and padding to them; applying it to nav li seems to generate a greater effect and the space around the nav is greater than when the same values are applied to nav a.
Thanks!
2 Answers
Daniel Botta
17,956 PointsThink of everything as a container. In this case, the nav is a container for all of the li tags. So any styles you add to the container element are being applied to the container. For example...
nav { padding: 5px; }
and
nav li { padding: 5px; }
would give you 2 very different results. The padding is only getting applied to the element you specify. With the nav li, you would be apply 5px of padding around every li within the nav container. So if you are trying to target the nav as a whole, then nav would work fine. If you are trying to be more specific and only target a specific element such as the li tags within the nav, then you would use nav li in this case.
Jonathan Grieve
Treehouse Moderator 91,253 PointsFirstly an li (list item) is a block level element but a link is inline so they behave differently in the browser. Block level elements take up the space of the root or parent element.
In simple terms, nav li selects list item elements inside a nav element.
But nav a selects an anchor element inside a nav element.
This is known as descendent selection. Selection an element that's a child of another.
Frank Chi
2,017 PointsThanks for the answer!
Frank Chi
2,017 PointsFrank Chi
2,017 PointsThanks Daniel! Really appreciate how simple you've made it to understand!