Question

CSS:

#holidayclosings ul{
margin:0;
padding:0;
background:red;
}

HTML:

<ul id="holidayclosings">
<li>Saturday, December 24: <b>Closed</b></li>
...

So as far as I can tell the #holidayclosings ul rule has NO EFFECT. If I change it to just ul it works, but then it affects the entire page, not just this one list. Obviously I’m forgetting something, but I haven’t had enough coffee and I’m drawing a blank. can someone help me out here?

Answer 1

Because you are trying to select the ul element that is a descendant of the #holidayclosings element. Try:

#holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

If you want to select an element in CSS by using a tag name and an identifier (notice there are no spaces between the tag name and the ID):

ul#holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

However for elements that you are selecting with IDs this doesn’t make sense since there can only be one of the element in the DOM. It’s more useful for selecting elements by attribute:

ul.holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

OR

ul[name="holidayclosings"] {
    margin     : 0;
    padding    : 0;
    background : red;
}