How to make CSS fractional list for ul li

To display the content of the article, it is not enough to display standard nested lists, because the view will be like this:

1
  1
  2
  3
  4
2
  1
  2
  3
  4
3
  1
  2
  3
  4

I need this view to be like this (the nested sub-items are 1.1, 1.2, 1.3, etc.):

1
  1.1
  1.2
  1.3
  1.4
2
  2.1
  2.2
  2.3
  2.4
3
  3.1
  3.2
  3.3
  3.4

To do this, I placed this block in a div with the class webinpnewlist, and added these styles:

.webinpnewlist ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.webinpnewlist ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}
.webinpnewlist ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}
.webinpnewlist li ol > li {
  margin: 0;
}
.webinpnewlist li ol > li:before {
  content: counters(item, ".") " ";
}