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
Yasin Atagün
4,691 PointsCustomizing #gallery ( list-style)
What is the difference between;
#gallery li {list-style: none;} and #gallery { list-style: none;}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Yasin,
When you use #gallery li you're applying the list style directly to the list items. When you use #gallery, you're applying it to the ul and the list items are inheriting that value.
It is recommended in the css specification that you apply it to the ul or ol rather than the list items directly.
See this section: http://www.w3.org/TR/CSS2/generate.html#propdef-list-style
I recommend you look through the nested list example there to see the difference between the two.
I suppose it's really only going to make a difference if you have nested lists but I think it's better to get into the habit of following the recommended way. What I gather from the link is that you should apply it to the ul's and ol's and let the li's inherit the value.
Jeremy Woodbridge
25,278 PointsAssuming there is a "." before "Gallery", those are known as "Classes". Classes are selectors in CSS that makes it easy to organize html content when editing in CSS. So in the first part of the example "gallery li {list-style: none;}", This is taking away the bullets or numbers from the list items in the gallery class in the html. The major difference between that and the "#gallery { list-style: none;}" is the gallery is selected as an ID. ID selectors can only be used once in an html sheet where as classes can be used multiple times.
Yasin Atagün
4,691 PointsI am really sory to mistake. Both of them are id. I was confusing on customizate the galleries list style. Why we dont use #gallery li {list-style: none} instead of #gallery {list-style: none}.. #gallery li is makes sense but its wrong for teamtreehouses quiz.
Jeremy Woodbridge
25,278 PointsAhhh now that makes sense, well there are a few reasons but it's situational at best. If there are multiple divs and paragraphs along with the list and you just want to edit the list area and add additional properties it's good practice for the #gallery li {list-style: none;} vs. #gallery {list-style: none;}
EXAMPLE:
gallery {
background: red;
}
gallery li {
list-style: none;
padding: none;
background: color;
}
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Yasin,
I fixed your code formatting for you. Now the
#is visible for both.This thread will help you with posting code to the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum