Skip ordered list item numbering

Asked 12/10, 2012 at 11:31 Answered 9/7, 2018 at 14:52

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.

Larock answered 12/10, 2012 at 11:31 Comment(2)

Do you really want to skip that item, or is it more like a child or an additional line of the item before it? – Chaliapin 12/10, 2012 at 11:36

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. – Larock 12/10, 2012 at 11:44

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

Victor answered 12/10, 2012 at 11:38 Comment(3)

Yup, I was thinking this solution might be all that's possible. Good article on 456 Berea Street about it. Thanks for the demo! – Larock 12/10, 2012 at 11:55

This has the unfortunate side effect of turning all <ul> elements into <ol> ones. – Stupid 30/10, 2017 at 3:34

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. – Marketing 11/8, 2018 at 16:7

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>

Ellis answered 12/10, 2012 at 13:25 Comment(5)

Very interesting. Looks like this has good browser support too. Can't think of any down-side... surely there must one?! – Larock 12/10, 2012 at 14:5

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. – Larock 12/10, 2012 at 14:38

Used this just now. Worked like a charm! – Goa 25/1, 2013 at 22:31

good but don't like the way you have to add value=3 to set/correct the count. jsfiddle.net/1vew6e61 – Allethrin 11/7, 2017 at 3:44

XHTML Strict validation complains there is no attribute "value" :( – Stupid 30/10, 2017 at 3:37

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

Victor answered 12/10, 2012 at 11:38 Comment(3)

Yup, I was thinking this solution might be all that's possible. Good article on 456 Berea Street about it. Thanks for the demo! – Larock 12/10, 2012 at 11:55

This has the unfortunate side effect of turning all <ul> elements into <ol> ones. – Stupid 30/10, 2017 at 3:34

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. – Marketing 11/8, 2018 at 16:7

Have to agree with everyone critizicing my previous "solution" as it seems, this is only possible with pseudo-selectors and then it doesn't matter whether you would use ul or ol. Giona's Solution is best.

previous content:

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

Consumer answered 21/10, 2016 at 10:15 Comment(7)

Add an Example here too to elaborate – Prelect 10/1, 2017 at 17:27

Hope it is elaborated enough – Consumer 11/1, 2017 at 18:52

Yup brother ,the user won't have to test the script themselves and now the can implement it directly :) – Prelect 14/1, 2017 at 13:50

Doesnt work it shows different result ir show 1,3. this solution is wrong – Sniff 5/4, 2017 at 20:1

worked for me and maybe better/shorter than Giona above jsfiddle.net/xuv342xb – Allethrin 11/7, 2017 at 3:41

This looked like a nice, clean and elegant solution - except it didn't work in 3 versions of Firefox I tested. – Stupid 30/10, 2017 at 3:39

Right! It's also exemplified in developer.mozilla.org/en-US/docs/Web/CSS/counter-increment – Tenebrific 5/5, 2018 at 5:37

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

Indira answered 16/10, 2014 at 15:42 Comment(2)

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) – Sniff 5/4, 2017 at 20:5

That's is not true. This is fully responsive and compatible along a Bootsrap usage. – Indira 13/7, 2017 at 13:33

-1

One thing I tried that seemed to work was just adding a font-size: 0. This could be applied to the aforementioned "skip" class.

Admittedly, this solution lacks some HTML purity, but is quite simple.

Emolument answered 9/7, 2018 at 14:52 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags