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

Dennis Marquez
PLUS
Dennis Marquez
Courses Plus Student 2,791 Points
Posted by Dennis Marquez
Dennis Marquez
Courses Plus Student 2,791 Points

My :empty doesn't work in Google Chrome. Any ideas?

Any ideas why it wouldn't work? I did exactly what was said in the video. I removed the content of list item number 7. It only says <li></li> now, and I wrote: :emtpy { background-color: tomato; } Not sure what I'm doing wrong?

3 Answers

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

If I am reading your line of code correctly, you need to specify what element will have that background color when empty. For example, 

p:empty {...}

...it looks like you left out the element: 

:empty {...}
Dennis Marquez
PLUS
Dennis Marquez
Courses Plus Student 2,791 Points
Dennis Marquez
Dennis Marquez
Courses Plus Student 2,791 Points

Thanks, but in the video the point was that you could leave it empty, and it will add the chosen styling to any empty element on the page. Even when I added the LI element (covered later on in the video) , it still didn't change anything.

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Oh okay, I didn't watch the video, I was just looking at the documentation on MDN. Can you post the rest of your code...maybe there is something there...I was playing with :empty on codepen, and I had to set the width and height of elements, or add padding to get them to show up...

div {
  width: 5em;    // <-- if this 
  height: 3em;  //  <-- and this weren't included, it didn't display
}

:empty {
  background: red;
}
Paul Cox
Paul Cox
12,671 Points
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.