Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Oliver Sewell
Oliver Sewell
16,425 Points

li:first-child and li:last-child not working?

have i typed something wrong the first child and last child tags aren't working

<!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="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
        }
        h1 {
      text-align: center;
    }
        ul {
            list-style: none;
            width: 50%;
            margin: auto;
        }
        li {
            border-bottom: 1px dotted #40918c;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>
/* Structural Pseudo-classes------------------ */

li:first-child {
  background: #52bab3;
  color: white;
} 

li:last-child {
  background: red;
}

5 Answers

Oliver Sewell
Oliver Sewell
16,425 Points

yeah it didn't work but then i turned my laptop off and on and now it works , strange huh

Christina Pagano
Christina Pagano
15,676 Points

Super weird, what browser were you using?

Christina Pagano
Christina Pagano
15,676 Points

Your code is fine, are you sure the path to the css file you're linking to is correct? Tried refreshing/clearing the cache?

Do you mean background-color? I've never come across a background property but that's not to say it doesn't exist; I'm no expert!! :-)

Steve.

Oliver Sewell
Oliver Sewell
16,425 Points

background: it is just the short version for background-color: - less typing its awesome haha

Awesome! I'll start using that ASAP, then!! :-)

Thanks for the tip.

Just to clarify, the "background" property is shorthand for:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Not just background-color :)

Also, when clearing the background styles with the shorthand, it's best practice to use "background: none" or, becuase when you use "background: 0;" it sets the background position, but will leave the rest.

OK - so you can set each of those properties by using background and appending those five properties in that order?

Pretty much - the preferred order is:

background: color image position/size repeat origin clip attachment initial|inherit;

For example:

background: #00ff00 url("../images/background.jpg") -10px -50px repeat-x;

Would do the following:

background-color: #00ff00;
background-image: url("../images/background.jpg");
background-position: -10px -50px;
background-repeat: repeat-x;

If you inspect some sites using background images with sprites, you'll see a lot of this in use :)

Thanks for the info - very useful stuff.

Steve.

Oliver Sewell
Oliver Sewell
16,425 Points

im using chrome , i thought maybe it was a bug in workspaces so i sent an email off I must of watched the video 5 times and checked each letter of my code, i was close to throwing my laptop out of the window haha

I had the same problem with Microsoft edge but the green color does appear in the Opera browser.