HTML Ordered List 1.1, 1.2 (Nested Counters and Scope) Not Working

Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/
The CSS reset used in that defaults all list margins and paddings to 0

UPDATE http://jsfiddle.net/qGCUk/4/ - you have to include your sub-lists in your main <li>

ol {  counter-reset: item}li {  display: block}li:before {  content: counters(item, ".") " ";  counter-increment: item}

<ol>  <li>one</li>  <li>two    <ol>      <li>two.one</li>      <li>two.two</li>      <li>two.three</li>    </ol>  </li>  <li>three    <ol>      <li>three.one</li>      <li>three.two        <ol>          <li>three.two.one</li>          <li>three.two.two</li>        </ol>      </li>    </ol>  </li>  <li>four</li></ol>

HTML Ordered List as the following 1.0, 1.1, 1.1.1, 2.0, 2.1, 2.1.1

Take a look on this fiddle, I managed to get what you wanted by using a single counter before counters.

Edit: Since there are a lot of people which prefer classes over direct html tags (including me) I created another fiddle that shows the concept with css classes. The best solution would be to mix both techniques together like in this fiddle, this is the way I would use.

The css is

/* selector for the first level of the nested list */
BODY > OL {
  /* reset the item counter when a new nested list starts
     e.g. everytime there is a <ol> tag as a direct child of the <body> */
  counter-reset: item;
  padding-left: 10px;
}

/* selector for the list items on the first level */
BODY > OL > LI::before {
  /* prepend X.0 to the content of every list item that is a direct 
     child of <ol> which is a direct child of the <body> */
  content: counter(item) ".0 ";
  counter-increment: item
}

/* selector for all sublists */
LI > OL {
  padding-left: 10px;
  /* when entering a new sublist reset the subitem counter */
  counter-reset: subitem;
}

/* selector for the items of in every sublist */
LI > OL > LI::before {
  /* prepend the current value of the item counter and the subitem
     counters to the content of each <li> tag in a sublist. */
  content: counter(item) "." counters(subitem, ".") " ";
  counter-increment: subitem
}

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

You can use counters to do so:

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Example

ol { counter-reset: item }li{ display: block }li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>  <li>li element    <ol>      <li>sub li element</li>      <li>sub li element</li>      <li>sub li element</li>    </ol>  </li>  <li>li element</li>  <li>li element    <ol>      <li>sub li element</li>      <li>sub li element</li>      <li>sub li element</li>    </ol>  </li></ol>

Nested counters HTML list 1 1.1 a i - is this possible

It is slightly different to the linked answer.

Firstly, there is a wrongly nested ordered list in your questions HTML. The closing tag of <li>three.two</li> should wrap <ol type="a">

We need to remove the content for lower levels with:

ol li li li:before {
  display: none;
}

Change the counter slightly for the second level:

ol li li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}

and give our lower levels their styles (the list style should be consistent, so no need for classes):

ol li li li {
  list-style: lower-alpha;
}
/* Every step down from here will take this property */
ol li li li li {
  list-style: lower-roman;
}

Of course, we can override with classes, for one level, if really needed:

ol.alpha li {
  list-style: lower-alpha;
}

Complete Example

ol {  counter-reset: item;}ol li {  list-style: none;}ol li:before {  content: counters(item, ".")". ";  counter-increment: item;}ol li li:before {  content: counters(item, ".")" ";  counter-increment: item;}ol li li li:before {  display: none;}ol li li li {  list-style: lower-alpha;}/* Every step down from here will take this property */
ol li li li li {  list-style: lower-roman;}/* Override with classes */
ol.alpha li {  list-style: lower-alpha;}

<ol>  <li>one</li>  <li>two    <ol>      <li>two.one</li>      <li>two.two</li>      <li>two.three</li>    </ol>  </li>  <li>three    <ol>      <li>three.one</li>      <li>three.two        <ol>          <li>three.two.one</li>          <li>three.two.two            <ol>              <li>three.two.one</li>              <li>three.two.two
                <ol>                  <li>three.two.one</li>                  <li>three.two.two                    <ol>                      <li>three.two.one</li>                      <li>three.two.two                        <ol class="alpha">                          <li>three.two.one</li>                          <li>three.two.two</li>                        </ol>                      </li>                    </ol>                  </li>                </ol>              </li>            </ol>          </li>        </ol>      </li>    </ol>  </li>  <li>four</li></ol>

Ordered list 1, 1.1, a

You can use list-style-type: lower-alpha; and cancel out your counters with the :not() pseudo class:

At the end of your stylesheet create a rule that targets your type="a" and assigns the list style type you want (lower-alpha).
Your counters will override this declaration so an easy solution is to only apply them to <ol> elements that are :not([type="a"]) (Not one of your alpha lists).

Hopefully this works for you:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol:not([type="a"]) > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol:not([type="a"]) > li::before {
  content: counters(item, ".");
  display: table-cell;
  padding-right: 0.6em;
}

ol[type="a"] {
  list-style-type: lower-alpha;
}

<ol>
<li>
    <b>
        Our rights if you breach this policy
    </b>
    <ol>
        <li>
            We will decide whether there has been a breach of this policy by you.
        </li>
        <li>
            If we decide that you are in breach of any part of this policy, we may:
            <ol type="a">
                <li>
                    issue a warning to you;
                </li>
                <li>
                    immediately stop your right to use our Service;
                </li>
                <li>
                    take legal action against you to recover any of our losses caused by your breach; or
                </li>
                <li>
                    notify law enforcement authorities if we decide that you have broken any law; or
                </li>
                <li>
                    take any other action that we think is appropriate.
                </li>
            </ol>
        </li>
    </ol>
</li>
</ol>

HTML Ordered List 1.1, 1.2 (Nested Counters and Scope) Not Working