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 trialDennis Marquez
Courses Plus Student 2,791 PointsMy :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
13,965 PointsIf 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
Courses Plus Student 2,791 PointsThanks, 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
13,965 PointsOh 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
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.