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)

Will there be arbitrary levels of nesting? If not, you should be able to just [swap the top-level `content` styles with the nested ones](http://jsfiddle.net/BoltClock/Qup9s/2). — BoltClock, May 02 '14 at 11:57
@BoltClock: In my very case, I won't go into more additional level. So the two-level ul is what I need to solve. — Stéphane de Luca, May 02 '14 at 12:02
I saw my question was not that good, I have updated it (including the fiddle). — Stéphane de Luca, May 02 '14 at 12:22
I don't think there's any other workaround besides the one you have (adding a class). — BoltClock, May 02 '14 at 13:50

score 1 · Answer 1 · answered May 02 '14 at 11:57

1

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`

answered May 02 '14 at 11:57

Jay Patel

23,885
12
63
74

Nope. Compare your result with the question. – BoltClock May 02 '14 at 11:58
@BoltClock i update my answer check now this is worked. – Jay Patel May 02 '14 at 11:59
Now I'm on the fence - the `content: " (end)"` part seems to be missing completely. It might be important; I wouldn't recommend throwing away arbitrary values unless absolutely necessary. – BoltClock May 02 '14 at 12:05

score 0 · Answer 2 · answered May 02 '14 at 20:19

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

How to match a tag not containing another one?

2 Answers2

Check this demo jsFiddle

Result

CSS

100% Worked

Check this `demo jsFiddle`

`100% Worked`