36

Is there a way to not display the number for a single li in an ol. It's not an issue if it still contributes to the count of the list (I know this might seem like a strange request).

3 Answers 3

69

Yes, just set the CSS list-style-type property to none on the particular <li>.

li.nostyle {
  list-style-type: none;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li class="nostyle">three</li>
  <li>four</li>
</ol>

3
  • 7
    This hides the number, but the counting continues so that there will be a gap (1, 2, _, 4). Is there a way to keep the counting consistent while hiding the number (1, 2, _, 3)?
    – Jens
    Dec 16, 2012 at 21:08
  • 1
    The value attribute can be used for the LI elements, but that doesn't seem to be supported consistently. Furthermore, it doesn't seem to be accepted for EPUB2 either.
    – Jens
    Dec 16, 2012 at 21:15
  • 1
    @Jens there is a way, just add value parameter <li value="3">
    – fearis
    Jan 23, 2019 at 12:26
7

This will hide your first ordered list number.

This will look strange since your hiding your first number in the ordered list. This is one possible solution through CSS

ol li:first-child { list-style:none }

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
1
  • May be I should have read the question thoroughly. I thought you were referring to the first child element of an ordered list.
    – breezy
    May 14, 2011 at 3:53
7

(Not the answer, but in case someone needs...)
If you want to hide the number (bullet) of single item lists, you can use CSS3 :only-of-type selector.

li:only-of-type { list-style-type: none; }

This way, you won't have to assign different classes to your lists. Your lists can grow and shrink as necessary.

And this works for both ordered and unordered lists.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.