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

isaiah carter
isaiah carter
4,745 Points
Posted by isaiah carter
isaiah carter
4,745 Points

setting border to none

i am trying to select the first child of the li list and put border to none. what am i doing wrong?

style.css 
/* Complete the challenge by writing CSS below */\
li:first-child {
    border: none;
  border-top-left-radius: 5px;
  border-bottom-right-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

Daniel Baker
Daniel Baker
15,369 Points

Then, set the top-left and bottom-left

/* Complete the challenge by writing CSS below */\
li:first-child {
    border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

Not bottom-right.

Christopher Bolivar
Christopher Bolivar
10,879 Points
Christopher Bolivar
Christopher Bolivar
10,879 Points

you need to use the pseudo class on the <ul> element

ul:first-child

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Hi Isaiah,

you missed a crucial part of the question in the exercise

"Create a pseudo-class selector that targets the first-child li in .main-nav."

note how you accidentally put in a \ at the top as highlighted after the instructions, doing this can cause errors in code usually this ends up happening when you hit enter and bump the key above it by chance.

\
li:first-child {
    border: none;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

Your code is also missing the mentioned ".main-nav" class

it should look like this:

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

and to shorten it further you could also use the shorthand for radius:

.main-nav li:first-child {
    border: none;
    border-radius : 5px 0 0 5px
}

remember the 4 values are in a clockwise order : top left, top right, bottom right, bottom left.

your approach was correct, you just needed to catch that first bit of the question.

let me know if you have any questions.