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 Basics (2014) Basic Selectors Descendant Selectors

Posted by William Owens
William Owens
8,668 Points

why does setting text color to white eliminate bullet points?

why does setting text color to white eliminate bullet points in this list item?

ul li {

background-color: tomato;

color: white;

margin-bottom: 5px;

}

Mike White
Mike White
23,234 Points
Mike White
Mike White
23,234 Points

Hey William,

It doesn't get rid of the bullet points. Try setting the background color of the ul element to black and see what happens.

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Setting the color to white wouldn't eliminate the bullets.

But if your background is also white, you just wouldn't see them.

William Owens
William Owens
8,668 Points

Thanks guys, for some reason I didn't realize bullet points could be changed with the color property!

Michael Zeta
Michael Zeta
18,135 Points
Michael Zeta
Michael Zeta
18,135 Points

Hey William. It seems you've set the background color of ONLY the list item itself to tomato and the text of that the same list item to white but bullets next to list items are by default set to appear outside of the list item's background space. Is it possible that the bullet seems to disappear because the background of the parent element (e.g. the div containing the <ul>) is also white and you're simply looking for the bullet in the tomato colored area of the <li> instead?

If you haven't figured out a solution yet I'd recommend trying to add the a list-style-position: inside; declaration to the CSS and seeing if you can see the bullet then.. Guil Hernandez talks more about this here: https://teamtreehouse.com/library/css-basics/basic-layout/lists Hope this helps.