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
Oliver Sewell
16,108 Pointsli: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
16,108 Pointsyeah it didn't work but then i turned my laptop off and on and now it works , strange huh
Christina Pagano
15,676 PointsYour code is fine, are you sure the path to the css file you're linking to is correct? Tried refreshing/clearing the cache?
Steve Hunter
57,712 PointsDo 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
16,108 Pointsbackground: it is just the short version for background-color: - less typing its awesome haha
Steve Hunter
57,712 PointsAwesome! I'll start using that ASAP, then!! :-)
Thanks for the tip.
Ash Scott
2,544 PointsJust 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.
Steve Hunter
57,712 PointsOK - so you can set each of those properties by using background and appending those five properties in that order?
Ash Scott
2,544 PointsPretty 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 :)
Steve Hunter
57,712 PointsThanks for the info - very useful stuff.
Steve.
Oliver Sewell
16,108 Pointsim 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
nathanielcusano
9,808 PointsI had the same problem with Microsoft edge but the green color does appear in the Opera browser.
Christina Pagano
15,676 PointsChristina Pagano
15,676 PointsSuper weird, what browser were you using?