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 trialname564681351614
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?
1 Answer
Casey Ydenberg
15,622 PointsThe 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
3,497 PointsThanks 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
15,622 PointsI 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
3,497 PointsHi 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
15,622 PointsGood catch Eric, i just edited my post so it should be displaying correctly now.
Dennis Castillo
16,018 PointsDennis Castillo
16,018 PointsIf 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....