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

Heidi S Wolff
Heidi S Wolff
12,757 Points

:first-child and :last-child Challenge

Can some please look at this? It says that I haven't set the border to none but I have set it to none.

https://teamtreehouse.com/library/css-selectors/going-further-with-attribute-selectors-and-pseudoclasses/firstchild-and-lastchild-challenge

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

4 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 25,651 Points

Hi, Heidi –

The challenge is somewhat worded in a confusing manner; "in" refers to using a descendant selector. That said, you should only be declaring your selector once, and including the properties/values as instructed in the challenge.

Hint: You'll need to use the longhand version for the border-radius properties task.

Hope this helps!

Heidi S Wolff
Heidi S Wolff
12,757 Points

Thanks Rich. Here's what I did. The challenge is saying that I need to set the border to none which is what I did in the line above.

I had everything together the first time and I got the error message; that's why I separated the two thinking that's what the challenge wanted.

https://teamtreehouse.com/library/css-selectors/going-further-with-attribute-selectors-and-pseudoclasses/firstchild-and-lastchild-challenge

Steven Parker
Steven Parker
187,484 Points

The border setting is good, but you have other issues:

  • you have a stray brace in your descendant selector, it should be ".main-nav li:first-child"
  • there should be only one rule for both properties, but border-radius is in a separate rule here
  • it's OK to use the shorthand notation for border-radius, but the order of the values should be:
          top-left   top-right   bottom-right   bottom-left