How to make nested lists with numbers and alphabetical - html

Question

I'm trying to get a nested list to change from numbers to alphabetical. You can see JsFiddle where I have the class alpha I would like the 3.1.1 to change to a. Any ideas?
strong {
font-weight: 700;
}
.maincontent ol {
margin: 25px;
}
ol.tc li ol.d {
list-style-type: lower-alpha !important;
color: red;}
ol.tc {
counter-reset: item;
}
ol.tc li {
display: block;
position: relative;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.tc {
counter-reset: item;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.alpha {
counter-reset: item;
list-style-type: lower-alpha;
}
ol.alpha li:before {
list-style-type: lower-alpha;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
color: pink;
}
<ol class="tc">
<ul>
<li><strong>Preconditions</strong><br>
<ol class="tc">
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us. </li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.
<li>Provide us with valid proof that you are aged over 18 years. </li>
</ol>
</li>
<li><strong>Tariff Limits</strong><br>
<ol class="tc">
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li><strong>Call Charges covered by Tariff limits</strong><br>
<ol class="tc">
<li>Tariff limits cover calls made in Ireland to:
<ol>
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ul>
</ol>

Answer 1

html markup not valid
<ol class="tc">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</ol>
see answer below
strong {
font-weight: 700;
}
.maincontent ol {
margin: 25px;
}
ol.tc li ol.d {
list-style-type: lower-alpha !important;
color: red;}
ol.tc {
counter-reset: item;
}
ol.tc li {
display: block;
position: relative;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.tc {
counter-reset: item;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.alpha {
counter-reset: item;
}
ol.alpha li:before {
content: counter(item, lower-alpha) ". ";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
color: pink;
}
<ol class="tc">
<li><strong>Preconditions</strong>
<br/>
<ol class="tc">
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us.</li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.</li>
<li>Provide us with valid proof that you are aged over 18 years.</li>
</ol>
</li>
<li><strong>Tariff Limits</strong>
<br/>
<ol class="tc">
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li><strong>Call Charges covered by Tariff limits</strong>
<br/>
<ol class="tc">
<li>Tariff limits cover calls made in Ireland to:
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ol>

Answer 2

The following would be an example for what you are trying to achieve:
<ol type="1">
<li> Decide on a subject.
<ol type="a">
<li> Business
<li> Family
<li> Hobby
</ol>
<li> Acquire the necessary tools and materials.
<ol type="a">
<li> Web browser
<li> Text editor or HTML editor
<li> Graphics and clip-art
<li> Graphics editor
</ol>
<li> Write the HTML source code.
</ol>
Just try it inside JFiddle without CSS code and change it to your wish.

Answer 3

The HTML you have is not valid, the only permitted content for <ol> and <ul> is zero or <li> elements.
For the alphabetical style, you will need the correct pseudo content for it.
.alpha li:before {
content: counter(item, lower-alpha)".";
}
See the update demo please - http://jsfiddle.net/sjqvpuuL/
ol {
counter-reset: item;
}
li {
display: block;
position: relative;
}
li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
.alpha li:before {
content: counter(item, lower-alpha)".";
}
<ol>
<li>
<strong>Preconditions</strong>
<ol>
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us.</li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.</li>
<li>Provide us with valid proof that you are aged over 18 years.</li>
</ol>
</li>
<li>
<strong>Tariff Limits</strong>
<ol>
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li>
<strong>Call Charges covered by Tariff limits</strong>
<ol>
<li>Tariff limits cover calls made in Ireland to:
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ol>
</li>
</ol>