How to match a tag not containing another one?

Question

I want to style a ul/li differently when it does not contain another tag ul/li.

UPDATED as I understand my question was misleading, I added the full scope explicitly (sorry about that).

The fiddle is http://jsfiddle.net/stephanedeluca/v7nxB/

The html is as follows:

Two-level nesting:

<ul>
    <li>Grain&nbsp;:
        <ul>
            <li>Baisse du rendement</li>
            <li>Sénescence plus rapide la plante</li>
            <li>Sensibilisation accrue à la fusariose des tiges</li>
        </ul>
    </li>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
</ul>

One level:
<ul>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
    <li>Sensibilisation accrue à la fusariose des tiges</li>
</ul>

The current CSS (lessCSS code actually) is as follows:

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: ".";
        }

        &>ul { 
            li:after {
                content: " (end)";
            }
            li:last-child:after {
                content: " (final end)";
            }
        }
    }
}

The result it produces is as follows:

Two-level nesting:

   o Grain
    — Baisse du rendement (end)
    — Sénescence plus rapide la plante (end)
    — Sensibilisation accrue à la fusariose des tiges (final end)
    ;
   o Baisse du rendement ;
   o Sénescence plus rapide la plante.

One level:
   o Baisse du rendement ;
   o Sénescence plus rapide la plante ;
   o Sensibilisation accrue à la fusariose des tiges.

One level is ok, but the two-level is not what I want.

Two-level should be as follows while one-level stays still:

   o Grain
    — Baisse du rendement ;
    — Sénescence plus rapide la plante ;
    — Sensibilisation accrue à la fusariose des tiges.
    (final end)
   o Baisse du rendement ;
   o Sénescence plus rapide la plante.

As you may understand, I'll replace (final end) by empty string once the CSS works.

Any idea?

UPDATE 2: I just found an interim work around with the help of a class (not great, but it works) (the fiddle)

Answer 1

There is an interim work around I've found which takes advantage of a separate class as follows:

Two-level nesting:

<ul>
    <li class="compact">Grain&nbsp;:
        <ul>
            <li>Baisse du rendement</li>
            <li>Sénescence plus rapide la plante</li>
            <li>Sensibilisation accrue à la fusariose des tiges</li>
        </ul>
    </li>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
</ul>

The class I named "compact" is there to tell not to apply the rules that handle ul/li suffix.

The CSS becomes as follows:

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: ".";
        }

        &.compact:after {
            content: "";
        }
    }
}

The inconvenient comes from the fact you need to add information to your data source which does not bear true semantic. But it works for now.

Hope someone might found a better way to proceed

Answer 2

You need something like this,

Check this demo jsFiddle

Result

o Grain
    — Baisse du rendement ;
    — Sénescence plus rapide la plante ;
    — Sensibilisation accrue à la fusariose des tiges.
    (final end)

CSS

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: "(final end)";
        }

        &>ul { 
            li:last-child:after {
                content: " .";
            }
        }
    }
}

100% Worked