Nested ordered list inside unordered - html

Question

I'm using lists for "Terms and conditions" page and in order to make the structure neater I'm using ordered lists. Problem is that I want to make the outer list unordered, and when I do that it's losing the count for the nested ordered lists. I know I can make it in many ways including manually, but I want to know if it's possible to handle this situation somehow.
<ol>
<li>
<h2>Title of section 1</h2>
<ol>
<li>Text 1.1
<li>
<li>Text 1.2
<ol>
<li>Text 1.2.1</li>
<li>Text 1.2.2</li>
</ol>
</li>
</ol>
</li>
<li>
<h2>Title of section 2</h2>
<ol>
<li>Text 2.1
<li>
<li>Text 2.2
<ol>
<li>Text 2.2.1</li>
<li>Text 2.2.2</li>
</ol>
</li>
</ol>
</li>
</ol>
Using CSS I'm able to show everything as it should be
https://jsfiddle.net/tutancamon/bfhkqtdg/41/
What I want is to remove the number in front of the titles because it already contains them...

Answer 1

Unorderded list element <ul> sounds like what you need to use.
ul {
list-style: none;
}
<ul>
<li>
<h2>Title of section 1</h2>
<ol>
<li>Text 1.1
<li>
<li>Text 1.2
<ol>
<li>Text 1.2.1</li>
<li>Text 1.2.2</li>
</ol>
</li>
</ol>
</li>
<li>
<h2>Title of section 2</h2>
<ol>
<li>Text 2.1
<li>
<li>Text 2.2
<ol>
<li>Text 2.2.1</li>
<li>Text 2.2.2</li>
</ol>
</li>
</ol>
</li>
</ul>

Answer 2

Use css property list-style-type like so:
ol.outer {
list-style-type: none;
}
This will however mess with the numbering. Which you can fix like so:
ol {
list-style-type: none;
counter-reset: item;
}
ol>li::before {
counter-increment: item;
content: counters(item, ".") " ";
}
ol.outer>li::before {
content: "";
}
<ol class="outer">
<li>
<h3>Section1</h3>
<ol>
<li> text1.</li>
<li> text2 </li>
<li> text3</li>
</ol>
</li>
<li>
<h3>section 2</h3>
<ol>
<li> text</li>
<li> text</li>
<li>
<strong>Some texts</strong>
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
</li>
</ol>
</li>
</ol>