Skip ordered list item numbering

html css list html-lists

12,262

Solution 1

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 */
}

Solution 2

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>

Solution 3

It's quite simple now.

Just add the following to a class .skip with .skip being used for the skipped list-item:

ol li.skip {
    list-style-type:none;
    counter-increment:none;
}

in HTML it would be:

<ol>
  <li>first list item</li>
  <li class="skip">2nd list item</li>
  <li>third list item</li>
</ol>

resulting in:

first list item
2nd list item
third list item

Solution 4

This is my solution (only with CSS) that allow you to keep the normal usage of an li (list-item) from an ol (ordered list). That means all li item are consitent and there are no item that not represent the same thing as its neighbour.

Code just below :

 .term-and-condition li {
    position: relative;
  }
  .term-and-condition ol ol {
    list-style-type: lower-latin;
  }
  .term-and-condition h2 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h3 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h2 + *,
  .term-and-condition h3 + * {
    margin-top: 4em;
  }

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Skip ordered list item numbering</title>
  </head>
  <body>
    <article class="term-and-condition">
      <h1>Participants agree to be bound by these Terms and Conditions</h1>
      <ol>
        <li>
          <h2>The Promoter</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> 

        <li>
          <h2>Eligibility</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li>
          <h2>Entry</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li>

        <li>
          <p>Entrants must upload an image and text that:</p>
          <ol>
            <li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li>
            <li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li>
            <li><p>in amet libero magnam consectetur facere,</p></li>
            <li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
            <li>
              <h3>Additional requirements</h3>
              <p>All entries must be the participant’s own image or have the relevant permission</p>
            </li>
            <li><p>The entrant must be the lorem</p></li>
          </ol>
        </li>
        <li>
        <h2>Winner Selection</h2> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p>
        </li>
      </ol>
    </article>
  </body>
</html>

— See the Codepen

View more solutions

12,262

AlecRust

Frontend developer living and working in London.

Updated on June 05, 2022

Comments

AlecRust almost 2 years
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.
- John Watts over 11 years
  
  Do you really want to skip that item, or is it more like a child or an additional line of the item before it?
- AlecRust over 11 years
  
  Yes, I just want to skip this item but retain the rest of the numbering. It's for track listings, that can be split into multiple sections within one "disk". The track numbers need to ignore the section titles. I can't actually create separate sections with separate lists, since the numbering is for the tracks in the disk rather than each section. Let me know if that's not clear and you need a Fiddle.
AlecRust over 11 years

Yup, I was thinking this solution might be all that's possible. Good article on 456 Berea Street about it. Thanks for the demo!
AlecRust over 11 years

Very interesting. Looks like this has good browser support too. Can't think of any down-side... surely there must one?!
AlecRust over 11 years

Only downside I can see is this "value" attribute when dynamically generated. Would be nice if all handled within CSS (other than "skip" class) like previous solution.
Dan over 11 years

Used this just now. Worked like a charm!
Black Mamba over 7 years

Add an Example here too to elaborate
Dennis Kraut over 7 years

Hope it is elaborated enough
Black Mamba over 7 years

Yup brother ,the user won't have to test the script themselves and now the can implement it directly :)
user2936008 about 7 years

Doesnt work it shows different result ir show 1,3. this solution is wrong
user2936008 about 7 years

I wouldn't prefer this solution since its too much work when it comes to responsive design or when used bootstrap ( changing top and left margin/padding)
HattrickNZ almost 7 years

worked for me and maybe better/shorter than Giona above jsfiddle.net/xuv342xb
HattrickNZ almost 7 years

good but don't like the way you have to add value=3 to set/correct the count. jsfiddle.net/1vew6e61
Bruno J. S. Lesieur almost 7 years

That's is not true. This is fully responsive and compatible along a Bootsrap usage.
FKEinternet over 6 years

This has the unfortunate side effect of turning all <ul> elements into <ol> ones.
FKEinternet over 6 years

XHTML Strict validation complains there is no attribute "value" :(
FKEinternet over 6 years

This looked like a nice, clean and elegant solution - except it didn't work in 3 versions of Firefox I tested.
ooo about 6 years

Right! It's also exemplified in developer.mozilla.org/en-US/docs/Web/CSS/counter-increment
Anuga over 5 years

Also, using this method, you need to add additional styling to compensate that the list item will be placed over the numbers at some point.