Is it possible to partially list a HTML ordered list

Question

I am trying to create an ordered list using CSS and the counter increment. However I only want the first five items to show the counter:

Here is the code I currently have:

    var myUnit_1 = 1;
    $(".demo1 li").css("counter-increment", "list " + myUnit_1);

.demo1 {
    counter-reset: list;
}

.demo1 li:before {
    content: counter(list);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
</ul>

I need the list to be kept as one single list and not split in two parts.

Answer 1

Is it possible to partially list a HTML ordered list

Yes - and you don't need javascript for this.

I am trying to create an ordered list

Start with <ol> - it's the ordered list element.

I only want the first five items to show the counter

You can use a combination of li:nth-of-type(n + 6) and the CSS property list-style-type.

---

Working Example:

.demo1 li:nth-of-type(n + 6) {
  list-style-type: none;
}

<ol class="demo1">
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>No number</li>
  <li>No number</li>
  <li>No number</li>
  <li>No number</li>
</ol>

---

Further Reading:

• <ol> - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
• :nth-of-type() - https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
• list-style-type - https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type