Dynamic number creation for nested segments
Tags: html, css, beginners, codenewbie
Published: 2020-06-15 13:57:38

![Imgur](https://i.imgur.com/TkwsiTe.png)


Hi Everyone,

Now we have one interesting topic. This is very useful for creating the index page for the book or document or something else.
Another interesting point is here we didn't write any javascript code for getting this output

###HTML: 
 ```
   <ul>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment
                <ul>
                  <li>Sub-Sub-Sub-Segment</li>
                  <li>Sub-Sub-Sub-Segment</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
        </ul>
      </li>
    </ul>
 ```

###CSS:

```
    ul {
      list-style: none;
      counter-reset: my-counter;
    }

    ul li {
      counter-increment: my-counter;
    }

    ul li:before {
      content: counters(my-counter, ".") ") ";
    }
```

Here we are writting the `ul` inside one `li` element. That's ok. How it's working?🤔

first we need to know the following three properties.

+ counter-reset
+ counter-increment
+ counters

Here our counter name is `my-counter`

**counter-reset:**
    This property accepts the following values:
     1) The name of the counter to reset.
     2) The starting value to on each occurrence of the element.
The default starting value is 0.

**counter-increment:**
    This property accepts the following values:
    1) The name of the counter to increment.
    2) The value to add to the counter. The default value is 1.
***Note:*** The value is increamented before rendering. That's why we are giving the `counter-reset` value as 0 instead of 1.

**counters:**
   The CSS function enables nested counters, returning a concatenated string representing the current values of the named counters.
 
It accepts the following three values:
    1) The `name` of the counter
    2) The `string` to add. In our case this value is `. `(ex: 1.1, 2.1)
    3) `Style` - Maybe a numeric, alphabetic, or something else

Here the content property as `counters(my-counter, ".") ") "`. 
Here our counters will do a very big role. That is It returns the first level `li` segements(**segements**) as 1,2,3,etc.. and second level `li` segements as (**Sub-segements**) as 1.1, 1.2, 2.1, 2.2, etc.. and so on. Here the counters function is used as the value of the content property in `li` element `before` pseudo-class.

content property has the values of counters function for numbers as well as the string value of `)` for getting the output as `1), 1.2), 1.2.3)` instead of `1, 1.2, 1.2.3`.

What are you waiting for? That's all. Now we got what we want.😍

![Imgur](https://i.imgur.com/P0gBrLP.gif)

Thanks for reading this. I hope you learned something.

####Note:
 We can also getting the output as `a, a.a` or `I, I.I` by setting the css style value of `counter` function