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

CSS How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by name564681351614
name564681351614
3,497 Points

"UL" Commands

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
    }

    nav li {
    display: inline-block;
    }

Within the above code how does the program know that the "nav li" listed is relating to the "nav ul" above it? What prevents it from applying those instructions to some other "ul" within the page?

Dennis Castillo
Dennis Castillo
16,018 Points
Dennis Castillo
Dennis Castillo
16,018 Points

If you have 2 or more element within the "nav" just declare whatever the name you want like "nav1, nav2, nav3" and so on..... so you know where to go....

1 Answer

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

The selector is nav ul which is looking for a ul within the nav element. It would not apply to another ul because that ul would not be within the nav block. Same goes for nav li. The second selector could also have been nav ul li, but this is unnecessary because all li elements will be within a list. Hope this helps!

name564681351614
name564681351614
3,497 Points

Thanks again Casey!

What if you have 2 (or more) "ul" elements within the the "nav" element? How would it know which one to go to?

Would it be unlikely to have to "ul" within the nav?

Thanks! Eric

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

I formatted your initial post to be more readable.

If you have more than one element that can be targeted by a rule, you can either give a class or id to the element. Imagine you have this markup:

<div>
<ul>
<li>This is the first list inside the div</li>
</ul>
<ul>
<li>This is the second list inside the div</li>
</ul>
</div>

And you have this css:

div li{
color:red;
}

This makes the font color of all list items red.

If you want the second one to be blue, you can add a class to the second one like this:

<div>
<ul>
<li>This is the first list inside the div</li>
</ul>
<ul class="myClass">
<li>This is the second list inside the div</li>
</ul>
</div>

and then you add the following rule to your css:

div li{
color:red;
}

.myClass li{
color:blue;
}

You can also use pseudo classes to achieve this like nth-child

name564681351614
name564681351614
3,497 Points

Hi Hugo, thanks for the info. It looks like the first line of your last code example isn't displayed correctly, making it hard for me to see what you are talking about. I do not see ".myClass" listed within the beginning of your code but I see it referenced at the end. Having a hard time following that....

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Good catch Eric, i just edited my post so it should be displaying correctly now.