counters Counters In CSS

Anand Darshan · June 17, 2020

Hey, will anybody solve this problem or explain me why it is happening to this counter lists that I am creating in css.

the problem here is that the last group of lists are the continuation of the first group of lists and in between, I have used nested lists, so counter should be continuing the counting after the the first group( 1-5th lists ) of lists( which is from the number 6 - last group of lists) but it doesn't....please tell me why ?


    <style>
        ol{
            counter-reset: section;
            list-style-type: none;
        }
        li::before{
counter-increment: section;
content:Counters(section,":") " ";
        }

    </style>

</head>

<body>
<br><br><br><br>   

<ol>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
<ol>
     <li>text</li>
     <li>text</li>
     <li>text</li>
     <li>text</li>
    <li>text
        <ol>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ol>
    </li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

Ingolme · June 17, 2020

The issue is that you should not have an <ol> tag as a direct child of another <ol> tag. It runs into an <ol> and stops counting there. Your structure should look like this:

<ol>
  <li>text</li>
  <li>text</li>
  <li>text <!-- ol element wrapped in this li -->
    <ol>
      <li>text</li>
      <li>text
        <ol>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
      <li>text</li>
      <li>text</li>
    </ol>
  </li>
  <li>text</li>
  <li>text</li>
</ol>

Sign In

counters Counters In CSS

Recommended Posts

Anand Darshan

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity