Issue
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.
Solution
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-typelist-style-type
- https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Answered By - Rounin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.