Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 210
AlecRust Avatar asked Oct 12 '12 11:10

AlecRust


People also ask

How do I skip the number in ordered list in HTML?

You can make the list skip some numbers in a list with the value attribute. This can be done inside the <li> tag, which will change that individual list item to the number your designate to it. All list items after it will be numbered upwards from that number.

How do I remove numbers from ordered list?

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.

How do I start an ordered list from a specific number?

The start attribute specifies the start value of the first list item in an ordered list. This value is always an integer, even when the numbering type is letters or romans. E.g., to start counting list items from the letter "c" or the roman number "iii", use start="3".


2 Answers

The simplest way is to remove the list marker from the item to be skipped and set the number of the next item using the value attribute (which will not be deprecated/obsolete in HTML5). Example:

<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>
like image 137
Jukka K. Korpela Avatar answered Oct 05 '22 04:10

Jukka K. Korpela


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 */
}
like image 44
Giona Avatar answered Oct 05 '22 02:10

Giona