specifying unpaired parentheses in ordered lists rather than dot (period)

Question

Is there an easy way, as in designed, to specify that an unpaired parentheses ")" closes order list numbers rather than the standard dot "." ?

I read a solution here, but this solution seems to be a global solution to an entire web page. But I want to build a complex list that makes use of both dots and unpaired parentheses with varying types of ordered list designations (numerals, upper and lower case letters as well as roman numerals) to distinguish an outer list item with an inner list item using the same list designation.

Now my html kung-fu is not very Bruce Lee, so I hope there might be a simple solution.

For Example:

<ol type="I" align="justify">
    <li>Historical introduction</li>
    <li>Dentition in various groups of vertebrates
    <ol type="A" align="justify">
        <li>Reptilia
        <ol>
            <li>Histology and development of reptilian teeth</li>
            <li>Survey of forms</li>
        </ol>
        <li>Mammalia
        <ol>
            <li>Histology and development of mammalian teeth</li>
            <li>Survey of form
                <ol type="a" align="justify">
                    <li>Primates
                    <ol>
                        <li>Lemuroidea</li>
                        <li>Anthropoidea
                        <ol type="a" align="justify">
                            <li>Platyrrhini</li>
                            <li>Catarrhini
                            <ol type="i" align="justify">
                                <li>Cercopithecidae</li>
                                <li>Pongidae</li>
                            </ol>
                            </li>
                        </ol>
                        </li>
                    </ol>
                    <li>Carnivora
                    <ol>
                        <li>Creodonta</li>
                        <li>Fissipedia
                        <ol type="a" align="justify">
                            <li>Ailuroidea</li>
                            <li>Arctoidea</li>
                        </ol>Pinnipedia</li>
                    </ol>
                    <li>Etc. . . .</li>
                </ol>
                </li>
            </ol>
            </li>
        </ol>
        </li>
    </ol>

I expanded the example to illustrate the indentation (which is slightly off, but close enough for affect I hope). I tried to pasted the above as a rendered webpage but for some reason all of the indentation as well as list identifiers are lost.

Answer 1

You can keep this from being "global" by adding a .paren class to the css like in this jsfiddle (forked from the one you show above).

You'll also want to open the ol tag with <ol class="paren">