Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child Challenge

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

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.

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,884 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.