How to make nested lists with numbers and alphabetical

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 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>

Answer 3

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.