Question

Can someone shed some light on what the difference is between these two types of CSS declarations:

ul#test {
}

#test ul {
}

I have looked and cant seem to find the difference, but they act differently when I use them on a test page. As far as I can tell they do the same thing, which is to associate the #test ID only with a UL tag that it is assigned to. In actual use, though, when I use ul#test in my style sheet, the formatting works properly. On the other hand, if I use #test ul it does not.

You can see what I am referring to here:

http://jsbin.com/awixib/2/edit#source

Does the ul#test method mean that the ID is assigned specifically to a UL tag and the #test ul means that the UL is within another tag that is assigned the ID?

Answer 1

ul#test {
}

This one is applied to the ul whose id is test

#test ul {
}

this one applies to ul whose ancestor is an element with an id test