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

Nick White
Nick White
8,326 Points

Need help here

It tells me to adjust the border radius when there isn't any border. Additionally, when I do, it just tells me to set all border properties to none.

style.css
/* Complete the challenge by writing CSS below */
.main-nav:first-child > li:first-child {
    border: none;
  border-radius: 5px 0px 0px 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>

2 Answers

Jonathan Fernandes
PRO
Jonathan Fernandes
Pro Student 22,745 Points

I think you missed a small detail on what the question was asking:

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

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

You were selecting the wrong elements. Does that help?

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

your code as you wrote it

/* Complete the challenge by writing CSS below */
.main-nav:first-child > li:first-child {
    border: none;
  border-radius: 5px 0px 0px 5px;
}

you've made this more complicated than it needs to be

by trying to use the ">" to target a direct child descendant. In this use case if you look at the index.html file its not necessary or the simplest way to deal with this.

simply using:

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

you have already selected " .main-nav " and its descendant " li " all you needed to complete it was to say you want the first child of this list.

your final code would then look like this

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