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 :only-child and :empty

Alexander Melo
Alexander Melo
4,297 Points

Having 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?

Mark Singleton
Mark Singleton
5,182 Points

I 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).

12 Answers

Stephen Bolton
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Points

I 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
Omarwali Jones
8,251 Points

Bug had me thinking I was completely noob lol

Paul Cox
Paul Cox
12,671 Points

I 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
Alexander Melo
4,297 Points

It doesnt work, and Guil in the video doesnt put li:only-child, he does :onlychild.

saranyamoellers
saranyamoellers
31,691 Points

is 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
Alexander Melo
4,297 Points

Yes the ul is the only child.

Alexander Melo
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
Alexander Melo
4,297 Points

Some tags arent showing up

Alexander Melo
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
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
Greg Kaleka
39,021 Points

This works. Where is your :only-child code going, though?

It 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
Patrick Olvera
6,339 Points

I'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.

Yeah, it absolutely doesn't work.

Rob Axelsen
Rob Axelsen
4,082 Points

Same here! 4 months, and still no fix?

Stephen Bolton
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Points

I 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
Rob Axelsen
4,082 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Points

Gotcha 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
Rob Axelsen
4,082 Points

Absolutely, Stephen. Vim is my go-to :) I have reported the bug now.

Rob Axelsen
Rob Axelsen
4,082 Points

Absolutely, Stephen. Vim is my go-to :) I have reported the bug now.

Ally Sparham
Ally Sparham
9,753 Points

Still no fix after 5 years either apparently!

Wow last comment here was 4 months ago, this still hasn't been resolved.

Ally Sparham
Ally Sparham
9,753 Points

Still hasn't and it's 2020 now!

Pedro Escalona
Pedro Escalona
3,495 Points

I 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.