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

Asked

Viewed 157 times

5

I have this HTML I can’t 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 have only the counter in the first level of this list. At the bottom it would look like this:

1. Main
    Secondary A
    Secondary B
    Secondary C

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

jsFiddle: http://jsfiddle.net/trmcxasz/

Testing the most extensively repair problem that omit content: counter(li); works, which doesn’t make much sense to me at first because I’m omitting "content"...

css

1 answer

5


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

Your changed code:

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

Thus, only the li directly below the ol is that are affected.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.