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

Xu Cheng
Xu Cheng
5,038 Points

Create a pseudo-class selector that targets the first-child li in .main-nav.

Question is :Create a pseudo-class selector that targets the first-child li in .main-nav. Remove all border styles by setting border to none. Then, set the top-left and bottom-left border-radius to 5px. Watch this related video for a review on border-radius.

I don't why it keeps giving me Bummer! It says "Make sure you're using a pseudo-class that targets the first-child li element in .main-nav."

style.css
/* Complete the challenge by writing CSS below */

.main-nav 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>
Anthony Domina
Anthony Domina
Pro Student 19,571 Points

Try adjusting your spacing. Here is how you have it starting already:

.main-nav li: first-child{

Change it to this: .main-nav li: first-child {

Notice how there is now a space between the word child and the curly braces.

If this does not work, try this:

.main-nav li:first-child {

5 Answers

james south
james south
Front End Web Development Techdegree Graduate 33,251 Points

you can't have a space after the colon, it's gotta be .main-nav li:first-child....

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

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

Hello group, Try this, it runs good.

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

You can try this. It's correct answer. .main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

Why the zeros??? That's ridiculous! They were not covered in that video!