CSS Unordered List: Why Does One Technique Work But Another Doesn't Work?

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 "doesn't work" requires the <ul> to be a child (direct or non-direct) of any element of class help

So if the div was:

<div class="floatleft help">

It would work.

Answer 2

The problem is that the selector .help ul applies to a ul tag that is a child of an element with the class help. The corresponding markup for this would look something like this, where the div tag could be any element, and not necessarily the immediate parent of the ul tag.

<div class="help">
    <ul>
        ....  
    </ul>
</div>

In your case, you have a ul tag with the class help, which is exactly what ul.help selects.

For a comprehensive reference on CSS selectors, see the W3C page.

Answer 3

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".

Answer 4

To expand on Matt's answer:

.help ul Means "a ul element contained (however deeply nested) within an element with the class 'help'"

ul.help Means "a ul element with the class 'help'"

For reference

ul .help Means "an element with the class 'help' contained (however deeply nested) within an element with a ul element"

Answer 5

On the last line li.help shouldn't work either because you're addressing all li's with a class of 'help' of which you have none.

What 'works' might also depend on which element you're trying to apply the styles to. You might want to check some HTML reference guides as to what elements to apply your list settings to. Generally your overall bullet settings are done on the ul but some spacing is also applied to the li's in some browsers.

Answer 6

.help ul is targeting <ul> descendants of elements with the 'help' class:

Example: (won't work)

<div class="help">
   <ul>

ul.help targets <ul> elements with the help class.

Example: (will work)

<ul class="help">

.help li should work as that is targeting <li> descendants of elements with the 'help' class, which is what you have.

Example: (will work)

<ul class="help>
  <li>

li.help shouldn't work because that will target <li> elements with the 'help' class, which you don't have in your markup.

Example: (won't work)

<ul>
  <li class="help">

Read up on how descendant selectors and the cascade (the 'C' in CSS) works.