Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Css

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>

How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

Just modify your HTML to have all your list inside an li element as follow:

<ol>
  <li class="parent">
      /** Your HTML **/
  </li>
</ol>

And add the following css to hide the first numbering:

li.parent:before { content: ""; }

Here you can find the demo.

How to create a 1.1, 1.2 1.3 ... HTML list?

This should work. It is a bad way to do this but if you MUST support IE6 not much choice.

      <ol>
        <li><span>1</span> Item
          <ol>
            <li><span>1.1</span> Item</li>
            <li><span>1.2</span> Item</li>
            <li><span>1.3</span> Item</li>
            <li><span>1.4</span> Item</li>
          </ol>
        </li>            
        <li><span>2</span> Item
          <ol>
            <li><span>2.1</span> Item</li>
          </ol>            
        </li>
      </ol>

with css

ol {list-style:none;}

After your comment I've redone it a bit.

  <ol>
    <li><span>1</span> Item
      <ol>
        <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.4</span> <p>Item</p></li>
      </ol>
    </li>            
    <li><span>2</span> Item
      <ol>
        <li><span>2.1</span> Item</li>
      </ol>            
    </li>
  </ol>

And the css would be

ol {list-style:none;}
ol li span
{
  display: block;
  float: left;
  width: 30px;
}
ol li
{
 clear:both;
 width: 400px;

}
ol li p
{
  float: left;
  width: 370px;
  margin: 0;

}

You may have to adjust the widths.

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 CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.

I fixed it for you, hopefully this is what you were looking for

li {  display: block}
.main-num-list, .sub-num-list {  counter-reset: item}
.main-num-list>li:before,.sub-num-list>li:before {  content: counters(item, ".") " ";  counter-increment: item}
.sub-albhabatical-list {  counter-reset: letter;}
.sub-albhabatical-list > li:before {  content: counter(letter, lower-alpha) ". ";  counter-increment: letter;}
.sub-roman-list {  counter-reset: roman;}
.sub-roman-list > li:before {  content: counter(letter, lower-roman) ". ";  counter-increment: roman;}

<div class="layout__wrapper">
  <ol class="main-num-list">
    <li>Main Line 111111111      <ol class="sub-num-list">        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Cssaaa</li>            <li>bbb</li>          </ol>        </li>
      </ol>    </li>
    <li>Main Line 22222222      <ol class="sub-num-list">        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Cssaaa</li>            <li>bbb</li>          </ol>        </li>        <li>Sub Line 22222222          <ol class="sub-albhabatical-list">            <li>Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Cssaaa              <ol class="sub-roman-list">                <li>moreeeeee</li>                <li>moreeeeee</li>              </ol>            </li>            <li>bbb              <ol class="sub-roman-list">                <li>moreeeeee</li>                <li>moreeeeee</li>              </ol>            </li>          </ol>        </li>        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Cssaaa</li>            <li>bbb</li>          </ol>        </li>      </ol>    </li>  </ol></div>

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>

How can I make an ordered list go 1. 1.1, 1.2, A, B, C, 1.3, 1.4

If you want to target the third level of lis you can use the ol ol ol li selector. To use uppercase letters, you can use a counter() instead of counters() as with counters() the generated text is the value of all counters while with counter() it's the value of the innermost counter only.

If you set the counter style to upper-alpha the markers will be uppercase letters.

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: 10px;
}

li li:before {
  content: counters(item, ".") " ";
}

.bolder {
  font-size: 1.17em;
  font-weight: bolder;
  margin: 0px;
}

.parent::before {
  font-size: 1.17em;
  font-weight: bolder;
}

ol ol ol li:before {
  content: counter(item, upper-alpha);
}

<ol>
  <li class="parent">
    <p class="bolder">How I want it to look like</p>
    <ol>
      <li>This is 1.1
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
          <li class="subItem">
            This is what I want to be C
          </li>
        </ol>
      </li>
      <li>
        Then it continues on with 1.2
      </li>
      <li>
        Then 1.3.. etc.
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Can Ordered List Produce Result That Looks Like 1.1, 1.2, 1.3 (Instead of Just 1, 2, 3, ...) With Css