Limit the counter () to a certain level in the list of lists

Question

Limit the counter () to a certain level in the list of lists

Navigation

#1 by (5 votes)

5

I have this HTML that I can not change:

<ol>
    <li>Main
        <ul>
            <li>Secondary A</li>
            <li>Secondary B</li>
            <li>Secondary C</li>
        </ul>
    </li>
</ol>

And I'm numbering this list via CSS with:

ol li:before {
    content: counter(li);
    counter-increment: li;

The result is basically this:

1. Main
    2. Secondary A
    3. Secondary B
    4. Secondary C

But what I intend to only have the counter on the first level of this list of lists. In the background it would look like this:

1. Main
    Secondary A
    Secondary B
    Secondary C

Not changing HTML what is the best way to prevent counting from continuing in the internal lists?

jsFiddle: link

Testing the problem more extensively repair than omitting content: counter(li); works , which at first does not make much sense to me as I am to omit "content" ...

css

asked by anonymous 20.11.2014 / 22:20

1 answer

How to list objects of a given class? Code does not run on command line

score 5 · Accepted Answer

To limit the propagation of the style you want to apply, you can use the > that limits the same to the direct child without propagating to" grandchildren "and" great-grandchildren ", etc.

Your code changed:

ol > li:before {
    content: counter(li);
    counter-increment: li;
}

So, only li directly below ol is affected.