Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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

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.