Question

I have a basic unordered list in HTML/CSS as follows…

<div class="floatleft">
    <ul class="help">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

I’m trying to do some custom stuff (image bullets, margin, padding, etc.) Since I assigned a class to the list block, I thought I could make my CSS declarations like the first two lines below. But that doesn’t work. When I do it like in the two lines below that, it works fine. I’m not understanding what the difference is.

.help ul { declarations }   /* Doesn't work */

.help li { declarations }   /* Doesn't work */


ul.help { declarations }    /* Works! */

li.help { declarations }    /* Works! */

Can anyone enlighten me? Thanks.

Answer 1

The space character pretty much means “now let’s look at the children”.

So when you have .help ul you are saying “grab all things with a class of help” then “grab all ul children within those things”.

However, “ul.help” says “grab all things that BOTH have a class of help and are a ul”.