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

Daniel Baker
Daniel Baker
15,359 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.

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 11,912 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.