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

Posted by Ingrid Bardales
Ingrid Bardales
10,616 Points

Need clarification for declaring id for Unordered List

I understand the second #gallery li but i don't understand the first one. If the second #gallery li declaration will override the first, what is the point of listing margin:0

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

2 Answers

notf0und
notf0und
11,940 Points
notf0und
notf0und
11,940 Points 
#gallery {

}

is not the same as 

#gallery li {

}

The first one selects gallery, while the second one selects the list items inside gallery. Get it? "#gallery li" doesn't interact with "#gallery" at all, only with the list elements inside the "#gallery" container.

Ingrid Bardales
Ingrid Bardales
10,616 Points

Thanks Bryan for your reply, lets see: i understand '#gallery li", so can i think of '#gallery' as a container for the list?

notf0und
notf0und
11,940 Points

Correct. When placing anything inside another element, like so:

<div id="gallery">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

those elements become "child elements" of what they're inside of. In this case, the list items are inside the #gallery container, and therefore to access them specifically with CSS, you'd do #gallery li. That means whatever CSS you write for "#gallery li" will not be applied to say the hypothetical "#nav li".

Hope that makes sense :)

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

ok, Bryan, i have a better sense of it now. it's gonna get some getting used to...I'm a newbie so I'm a bit wobbly. :) thanks for your time!

notf0und
notf0und
11,940 Points

Fantastic! You'll get the hang of it, it does take some time :) Good luck with future challenges!