How to create nested lists with numbers and in alphabetical order
I am trying to get a list of nested lists with numbers in alphabetical order. You can see the JsFiddle where I have the class alpha
I would like to 3.1.1
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>
+3
source to share
3 answers
html markup is 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>
+2
source to share
Below is an example of 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 in JFiddle without CSS code and change it to your liking.
+1
source to share
Invalid HTML, the only content allowed for <ol>
and <ul>
is null or <li>
elements.
For an alphabetic style, you need the correct pseudo content
for it.
.alpha li:before {
content: counter(item, lower-alpha)".";
}
See 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>
+1
source to share