Styling indent with HTML or CSS like in Ms Word - css

Question

I need a help to get a., b. style inner indent instead of 2.2.1., 2.2.2.. Found the original CSS code from HTML ordered list indent to keep original numbering
My code:
<style>
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>
<ol>
<li>One</li>
<li>
Two
<ol>
<li>Two one</li>
<li>
Two two
<ol type="a">
<li>Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>
What I'm getting:
1. One
2. Two
2.1. Two one
2.2. Two two
2.2.1. Two two a
2.2.2. Two two b
2.3. Two three
3. Three
What I need:
1. One
2. Two
2.1. Two one
2.2. Two two
a. Two two a
b. Two two b
2.3. Two three
3. Three

Answer 1

Since you don't need to prepend the inner lists with the section numbering, you can add an additional rule using counter to get the letters:
ol {
counter-reset: item;
}
li {
list-style: none;
}
li:before {
content: counters(item, ".")". ";
counter-increment: item
}
ol ol ol li:before {
content: counter(item, lower-alpha)". ";
}
Details: http://jsfiddle.net/kmAJ6/3/. Should work with your existing HTML.

Answer 2

Your type attribute has no effect because your css replaces the default numbering. One way around this would be to update your css rules to only target the first 2 levels and let the 3rd level use the default numbering. This will then let your type attribute take effect.
http://jsfiddle.net/TbjcV/
.level1,
.level2{
counter-reset: item
}
.level1 > li,
.level2 > li{
display: block
}
.level1 > li:before,
.level2 > li:before{
content: counters(item, ".") ". ";
counter-increment: item
}
<ol class="level1">
<li>One</li>
<li>
Two
<ol class="level2">
<li>Two one</li>
<li>
Two two
<ol type="a" class="level3">
<li type="a">Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>

Answer 3

I got this:
<style>
ol.cnt { counter-reset: item }
ol.cnt > li { display: block }
ol.cnt > li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>
html:
<ol class="cnt">
<li>One</li>
<li>
Two
<ol class="cnt">
<li>Two one</li>
<li>
Two two
<ol type="a">
<li>Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>
a bit messy, but seems to work.