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 Miron Alexandrov
Miron Alexandrov
Courses Plus Student 952 Points

Question about the <ol> and <ul>.

Why does the <ul> and <ol> remove it's bullet points or numbers when CSS is applied..?

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

CSS allows you to control the styling (appearance) of HTML elements, that's its main purpose.

There are specific settings that will remove and/or replace the bullet symbols or numbers in lists. Applyng CSS will only do this when those specific settings are used (such as "list-style: none;").

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

Hello Steven,

when I undertstand you correctly, the bullet points/numbers are just removed by our css in case we use a specific style-option like "list-style: none;". In the course that Miron is talking about, this is not the case. We only use this CSS:

ol li {
  background-color: tomato;
  color: white;
  margin-bottom: 5px;
}

Due to this fact, I don't get why our bullet points/numbers are removed.

Did I understand you incorrectly?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

This CSS won't remove the numbers, but you probably cannot see them because it makes them white, which is probably the same color as the background. Add this and you'll see that they are still there:

body { background-color: blue; }
Miron Alexandrov
PLUS
Miron Alexandrov
Courses Plus Student 952 Points
Miron Alexandrov
Miron Alexandrov
Courses Plus Student 952 Points

Thanks for the quick answer Steven!