AlecRust AlecRust - 1 month ago 14
CSS Question

Skip ordered list item numbering

I have an ordered list and I'd like to skip the number output from a particular item.

Traditional output:

1. List item
2. List item
3. List item
4. List item
5. List item


Desired output:

1. List item
2. List item
Skipped list item
3. List item
4. List item
5. List item


Is this achievable in CSS? I discovered an
<ol>
"start" attribute
that I didn't know about before, but doesn't seem to help me.

Answer

Another option is to use CSS3 counters: demo

HTML

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>‚Äč

CSS

ul {
    counter-reset:yourCounter;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ".";
}
ul li.skip:before {
    content:"\a0\a0\a0"; /* some white-space... optional */
}
Comments