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 Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child Challenge

Jeffrey Watters
PLUS
Jeffrey Watters
Courses Plus Student 7,403 Points
Posted by Jeffrey Watters
Jeffrey Watters
Courses Plus Student 7,403 Points

What is wrong with this code for code challenge?

The Challenge is to make a child selector for .main-nav then set border properties to NONE, the set top left and bottom left radius to 5px. I don't know why this code does not pass.

.main-nav + li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

style.css 
/* Complete the challenge by writing CSS below */
.main-nav + li:first-child {
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  }
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      <h1>My Site!</h1>
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <div>
      <p>Tattooed viral put a bird on it skateboard. Drinking vinegar locavore squid farm-to-table, dreamcatcher tattooed kitsch scenester. Tousled wolf squid Wes Anderson PBR, Williamsburg banh mi dreamcatcher stumptown ethnic sartorial mlkshk. Hella mixtape bespoke mustache Bushwick. Post-ironic hashtag jean shorts, Truffaut organic roof party pop-up wayfarers selvage narwhal. Mixtape roof party twee, post-ironic bespoke hella artisan meggings Carles brunch pop-up Tonx street art normcore. DIY paleo slow-carb occupy tofu fingerstache.</p>
    </div>
</body>
</html>

3 Answers

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey Jeffrey Watters , you're already pretty close with your code, all the declarations for the borders are correct. to pass the challenge you'd need to remove the + sign in the selector, that's it.

hope that helps and have a nice day ;)

Jeffrey Watters
PLUS
Jeffrey Watters
Courses Plus Student 7,403 Points
Jeffrey Watters
Jeffrey Watters
Courses Plus Student 7,403 Points

Thanks Alex, I added the > tag to the code instead of the + sign and it worked fine. I am a bit frustrated that the suggestion text kept referring to the BORDER property when that was not the case. Therefore I looked to the wrong area of code for the solution. Regardless, it is complete now and I do appreciate your help.

Jeff

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi there, Jeffrey Watters.

The challenge does accept the > combinator, but it doesn't require one. It's just looking for the first-child li inside the .main-nav element.

The :first-child pseudo-class and the direct child selector are completely different. :)