CODEWITHSUNDEEP
htmlcss
Sean Powell
Sean Powell

Reputation: 1437

No number for a single li in an ol

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).

Upvotes: 39

Views: 75732

Answers (3)

BalusC
BalusC

Reputation: 1108782

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>

Upvotes: 70

asif
asif

Reputation: 1015

(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.

Upvotes: 8

breezy
breezy

Reputation: 1918

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>

Upvotes: 7

Related Questions