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.
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.
Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or 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".
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>
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With