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

Posted by Nick Rocha
Nick Rocha
7,876 Points

How to use border-style property from :first child selector?

Can you check my border-style property: none;?

It is telling me to use all li elements to "none"

Any help would be awesome!

style.css 
/
li:first-child {
border-style: none;
border-radius:5px 0 0 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

Steven Parker
Steven Parker
207,972 Points
Steven Parker
Steven Parker
207,972 Points

The instructions talked about "setting border to none.", but the code above is setting "border-style" instead.

Also, there's a stray slash ("/") character at the beginning of the CSS, which will cause the selector to be ignored.

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,838 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,838 Points 
0   /
1    li:first-child {
2   border-style: none;
3   border-radius:5px 0 0 5px;
4   }

a) the css you wrote at position 0 has a "/" that should not be there b) the css at position 2 you wrote "border-style" you should just have used "border"

so your code would be 

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