Jump to content

Counters In CSS


Anand Darshan
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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>

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...