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
Ga In Shin
9,930 PointsQuestion about .main-nav and .main-nav li
Why 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?
This was a question posted before, but the answer does not make the problem clear, so I am posting again.
I don't understand why doing .main-nav {display: inline;} is not making all its children li's display into inline, but we have to do .main-nav, and .main-nav li seperately.
Please help!
2 Answers
January Shawn
Courses Plus Student 34 PointsHi! the is an issue with specificity I think If you apply display: inline to .main, this wont cause the children to display inline. check your console and you will see that the browser is applying what is called user agent styles to the page and the children li are set to display: list-style. Basically I think you should apply these styles to the child element in other to overide the user-agent styles i.e. the browser default styles to elements.
And also, not all styles applied to the parent element affects the children, some styles are specifically for the parent and does not have effect on the children.
ddt6fk2hdvuk3ut
13,919 PointsChanging the display property only affects the element for which we are adding the rule. It has no effect on its children. As such, we need to add the property to both selectors (.main-nav and .main-nav li).