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 CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Sam Katz
Sam Katz
2,986 Points
Posted by Sam Katz
Sam Katz
2,986 Points

how do I target li elements with main-nav class?

I cannot figure out how to select the list items.

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}

li.main-nav {
display:inline-block;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <header>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You are super close and it's your selector that is a bit off. They want you to select all the list items inside the <ul> with the class "main-nav", but you are selecting all <li> elements that have the class "main-nav". There is a distinct difference.

This is what you're selecting:

<ul>
  <li class="main-nav">Some item</li> <!-- this is what you're selecting -->
  <li>Another item</li>
  <li>A third item</li>
</ul>

Your selector would select the first list item in the above code because that list item has the class "main-nav".

To select all list items inside the "main-nav" class, your selector should look like this:

.main-nav li {
  /*  Your rules here */
}

This selects all list items within anything that has the "main-nav" class.

Hope this helps! :sparkles:

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Hey Sam,

Your current code

li.main-nav {
display:inline-block;
}

Is looking for a list item with the class main-nav, when your HTML structure is your list item is a child of element with the class main-nav, so what we need to do is restructure your selector a bit. I don't believe the challenge is looking for list items with the main-nav class, but rather children of the main-nav class.

I don't want to just give you the answer, but I'll help you get there on your own. The first hint would be to target the element with the main-nav class, and than target list items of that parent.

Give it a shot, and let me know how it goes.