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
Alexander Melo
4,297 PointsHaving Trouble with :only-child.
When Guil tells use to put :only-child, I put in my style.css the following.
:only-child {
color: #52bab3;
font-size: 1.5em;
}
When i refresh the page nothing happens, the li's stay the same font size and color. Anybody know the problem?
12 Answers
Stephen Bolton
Front End Web Development Techdegree Student 7,933 PointsI haven't watched the lesson so I don't know the exact purpose of why only-child was being used. But The :only-child selector matches every element that is the only child of its parent. In this case you don't have that situation happening. If you delete your list down to one item you will see your style take place. Hope this helps
Omarwali Jones
8,251 PointsBug had me thinking I was completely noob lol
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.
Alexander Melo
4,297 PointsIt doesnt work, and Guil in the video doesnt put li:only-child, he does :onlychild.
saranyamoellers
31,695 Pointsis your ul element only child in the body? if it is, it should work. or if you can show me the html page?
Alexander Melo
4,297 PointsYes the ul is the only child.
Alexander Melo
4,297 Points<!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;
}
ul {
list-style: none;
width: 50%;
margin: auto;
}
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>
Alexander Melo
4,297 PointsSome tags arent showing up
Alexander Melo
4,297 Points/* Structural Pseudo-classes------------------ */
li:first-child { background: #52bab3; color: white; }
li:last-child { border: none; }
:only-child { color: #52bab3; font-size: 1.5em; }
Alexander Melo
4,297 Points<!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;
}
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>
Greg Kaleka
39,021 PointsThis works. Where is your :only-child code going, though?
Bob Jones
5,269 PointsIt still doesn't work. Thankfully, from all the comments, it's very apparent that its a bug. Glad I didn't bang my head against this too long.
Patrick Olvera
6,339 PointsI'm having the same problem. I read somewhere that it is a bug in chrome. I do find this strange though, because I did some searching and found that Chrome does support the ':only-child' selector.
Antonio Jaramillo
15,604 PointsYeah, it absolutely doesn't work.
Rob Axelsen
4,082 PointsSame here! 4 months, and still no fix?
Stephen Bolton
Front End Web Development Techdegree Student 7,933 PointsI can try to help you guys out but I need some code. Like my comment above says the :only-child: only works when something is the only child of an element. If there are multiple children it wont take place. Post code for clarification please
Rob Axelsen
4,082 PointsHi Stephen! Thanks for wanting to help. I understand the theory, but having problems with the workspace. From the comments here, and my own experience, this seems to be a bug. I downloaded the workspace project, and it worked in my browser (Google Chrome, which I also use for the workspaces). I am on Linux Fedora, if that makes a difference for workspaces. If this have not been reported as a bug already, I'd be happy to report it myself.
Stephen Bolton
Front End Web Development Techdegree Student 7,933 PointsGotcha Robert. Well I am not on the same operating system as you. What I will say is that if you are experiencing bugs I would download the lesson files and use them in your own text editor. Which is never a bad idea because getting good at a text editor of your choice is a big step. Good Luck!
Rob Axelsen
4,082 PointsAbsolutely, Stephen. Vim is my go-to :) I have reported the bug now.
Rob Axelsen
4,082 PointsAbsolutely, Stephen. Vim is my go-to :) I have reported the bug now.
Ally Sparham
9,753 PointsStill no fix after 5 years either apparently!
Josh Coleman
1,359 PointsWow last comment here was 4 months ago, this still hasn't been resolved.
Ally Sparham
9,753 PointsStill hasn't and it's 2020 now!
Pedro Escalona
3,495 PointsI experienced the same problem. I have found the problem is down to the "Window Resizer" Chrome extension. Just try to disable the extension and refresh the browser..!! In my case works perfectly.
Mark Singleton
5,182 PointsMark Singleton
5,182 PointsI experienced the same problem.
I tried using Workspaces in Firefox instead of Chrome which is my usual browser and had the same issue.
However,
When I downloaded the project files and opened them with Notepad++ and then previewed the result in Chrome it worked fine.
In summary, it's a problem with Workspaces which is very buggy and quirky. I experienced an issue like this in 'How to Make a Website'. If you're scratching your head because you're not getting the results you should be, but your code looks exactly like Guil's you should try using Notepad++ (which is completely free).