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

Aaron Walton
Aaron Walton
3,557 Points

List styling question

In the CSS Deep Dive >> List Styles css the following code is used

ul li {
    background: url('marker.png') no-repeat 0 2px;
    padding-left: 35px;
}

li {
    margin-bottom: 1.2em;
}

why the need for the two different rules here? Why does the first rule need the ul before the li?

I agree, both selectors are pointing to every li on the page. Unless there is an ordered list (<ol></ol>) somewhere on page or you anticipate using one. Then the li item selector will select all lis on page regardless of list type.

Yeah, but isn't it just the list items that you need to give the margins to? Could you post a link to the challenge/video.

Aaron Walton
Aaron Walton
3,557 Points

Ah yes I wasn't looking at the code in the context of the entire accompanying page. Your reply prompted me to understand what is going on here thanks.

2 Answers

I missed that Aaron. Thanks

Aaron Walton
Aaron Walton
3,557 Points

Thanks to @Pokki RedSquirrel for cluing me into the answer. The accompanying html file has both ol and ul lists, so the ul li is used to target just the ul list and the margin bottom in the li rule without the ul targets both list types.