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 trialMichał Gonciarz
13,549 PointsOnly child doesn't work
Hi!
I've followed instruction from the video, but I can't get the same effect on only child rule - nothing changes. I've tried in many ways, but it just does not work. Would be greatful if someone point out the error for me.
Here's my CSS:
li:first-child {
background: #52bab3;
color: white;
}
li:last-child {
border-bottom: none;
}
:only-child {
color: #52bab3;
font-size: 3em;
}
I've made some minor changes to styling in the HTML file, because the H1 element wasn't centered as I applied code from video instruction, so I'm pasting also HTML code. The only child rule didn't work before my changes anyway.
<!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;
width: 50%;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
}
li {
border-bottom: 1px dotted #40918c;
padding: 15px 10px;
}
</style>
</head>
<body>
<!-- <h1>My list of items</h1> -->
<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>
10 Answers
Sulaiman Noh
14,538 PointsI think it's because of chrome. i have tried this code on other browser and it works fine.
Mairum Leal Ferreira
23,508 PointsLooks like a Chrome problem, works on Safari and Firefox.
Sulaiman Noh
14,538 PointsI have the same problem too. but the instructor not specify the element but still works?is it because of chrome or what?
Alexander Melo
4,297 PointsHaving the same problem. Anybody got the solution?
Keith Rauschl
3,067 PointsSo much for Google following standards for CSS.
Keith Rauschl
3,067 PointsI am using Chrome and the only-child method did not work. However, the "span:only-child" worked for the mark up: <span>✓</span> as shown in the video.
Andrea Bartholomew
5,262 PointsSame issue here. Using Chrome.
Paul Cox
12,671 PointsI just tried this as it seemed highly unlikely that Chrome doesn't support this. I had the same issue but after adding a tomato background I noticed that I was getting a "flash of content" of the tomato background on reload.
This lead me to believe that an extension was injecting some html into the body leading to the ul no longer being the only-child of the body. Removing the Window Resizer extension recommended in an earlier course fixed the problem and now the only-child selector worked correctly.
Zoltán Rajcsányi
6,426 PointsI tested and the Google Chrome doesn't support the only-child pseudo element only on the body tag at this time.
But you can nested the code example under a div and it's superb... :)
<!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>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 <span>✓</span></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7 <span>✓</span></li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<div>
</body>
</html>
Roy Joaquin
8,309 PointsMy only child doesn't work either but then again she's only 6 years old.
Michał Gonciarz
13,549 PointsMichał Gonciarz
13,549 PointsThanks Sham, will check that out.