Using the helpful answer by Jakub Jirutka in answer to a similar question, I can produce a very nicely aligned hierarchical ordered list as follows (see screenshot):
- Level 1
1.1 Level 2
1.1.1 Level 3
1.1.1.1 Level 4
But I want to convert "Level 3" to lower-alpha and "Level 4" to lower-roman (ideally, if possible, the lower-alpha and lower-roman would be enclosed by round brackets – (a), (i) etc.. )
Is this possible?
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 0;
}
li li:before {
content: counters(item, ".") " ";
padding-top: 0.6em;
}
body {
font-family: Sans-Serif;
}<ol>
<li>Intellectual property
<ol>
<li>Except to the extent permitted under this Agreement, as either may be amended from time to time by mutual agreement of the Parties:
<ol>
<li>
each Party shall not (and shall not permit or procure a third party, either directly or indirectly to):
<ol>
<li>
use any Intellectual Property of the other Party (or any of its Affiliates) without the prior written approval of the other Party (or any of its Affiliates);
</li>
<li>
disassemble, decompile or reverse engineer the whole or any part of the other Party's Intellectual Property;
</li>
<li>
obtain or attempt to obtain the algorithms for the other Party's Intellectual Property;
</li>
<li>
at any time do or cause to be done, any act or things contesting or in any way impairing the other Party's Intellectual Property;
</li>
<li>
use, apply for registration of, or otherwise promote any trade mark, name, logo or other word or mark that is the same as, or deceptively similar to, or substantially identical with, a trade mark, name, logo, word or mark of the other Party; and
</li>
<li>
advertise or otherwise promote the other Party in conjunction with the first Party's name in such a way that would imply or tend to imply that the first Party has a proprietary interest in the other Party's Intellectual Property.
</li>
</ol>
</li>
<li>each Party shall:
<ol>
<li>
ensure that all trademarks, copyrights and restricted rights notices that relate to the other Parties' Intellectual Property are reproduced in all activities;
</li>
<li>
immediately notify the other Parties in writing of any actual, suspended, threatened or anticipated infringement of the other Party's Intellectual Property that comes to the first Party's attention; and
</li>
<li>
in its absolute discretion, choose to prosecute any infringement of its Intellectual Property.
</li>
</ol>
</li>
</ol>
<li> None of the Parties will assign or purport to assign any of the other Party's Intellectual Property.</li>
<li>Each Party warrants that its Intellectual Property does not infringe the intellectual property rights of a third party.</li>
</ol>I assume one way is to create <ol type="a"> and <ol type="i"> tags in the HTML and create CSS rules targeting that (although I can’t figure that out either)?
2
Answers
Thanks to @IT Goldman I think I have solved the question. IT Goldman's answer allows you to change the Levels 3 and 4 to lower-alpha and lower-roman respectively. But the alignment of the content of the list was off (see my comment to @IT Goldman's solution). The solution below appears to fix the alignment problem (any improvements or things I have missed welcomed)
You can target level 3 and 4 specifically.
According to
counterdocs, you can specify as second argument the counter display.Combining those, here’s the solution:
You may also try instead of the
.another symbol)