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
Alex Forseth
8,017 PointsWhy do we format our selectors like this again??
In this video at one point we use our selectors as such:
.name,
.main-nav,
.main-nav li {
display: inline;
}
}
My Question is: What is the difference when selecting .main-nav and .main-nav li on the very next line? Doesn't li have to automatically abide by the same rules as .main-nav because thats its parent element anyway?
2 Answers
Max Senden
23,177 PointsHi Alex,
By targeting the list items in the class 'main-nav' (.main-nav li) you focus on styling only the list items found in there. If you style the list items by just targeting 'li' you'll be styling all list items on your webpage regardless of class. So, yes, you're correct. But in webdesign you want to be as specific as possible when it comes to styling. It'll save you a lot of time and effort in bigger projects.
Hope it helps, Max
Shung Chen
6,526 PointsI have the same question as well, was guessing because without targeting .main-nav li specifically, the list attribute will be automatically defined as a block-level element as default by Chrome
In spectator mode, it says the li attribute is defined by the User agent stylesheet as
, li {
display: list-item;
}
however even running with normalize.css and define display as none in the stylesheet fail to change the list items into inline elements without targeting .main-nav li