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

Posted by Derek Vha
Derek Vha
10,452 Points

Targeting a list item in a class, without affecting other list items on the page

Hi,

So I have completed the CSS course and I am now creating a navigation for the Lake Tahoe website. I am trying to target the <ol> in my navigation area without affecting the other list elsewhere on this page.

    <div class = "Navigation">
     <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">More Info</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
     </ul> 

    </div>

I am trying to increase the vertical spacing, so in my CSS I have:

.Navigation.li {

  padding-top: 205px;
  padding-bottom: 15px;


}

However this does not seem to work. I googled this issue and read maybe I could use an ID attribute along with a class?

Thank you

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there Dhivek.

It looks like you're close, but I don't see an ordered ol list in your code. In fact what's confusing me is I think you want to target an unordered list, which you've used in your code but you mentioned ol which is in ordered list.

But never mind.... assuming it is unordred to you want to target you need to amend your CSS selector slightly. You're trying to target the list inside the containing div element.

To do this you use 

.Navigation ul {

}

This will target any and all unordered list inside a div element with the class of "Navigation".

What you were trying to do before was target elements with a class of .li. Hope this helps! :-)

Derek Vha
Derek Vha
10,452 Points
Derek Vha
Derek Vha
10,452 Points

Thanks Jonathan that worked. Still getting used to CSS :-)