html5 - using type on ordered tag not working with list in html 5 -


please consider following html code using inside body tag:

<ol>     <li>this first list item</li>     <ol>         <li>nested list item</li>     </ol>  </ol>  <ol>     <li>this second list item</li>     <ol type = "a">         <li>nested list item different type</li>     </ol> </ol> 

i using following style :

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, ".") " "; } 

i following output :

1 first list item 1.1 nested list item 1 second list item 1.1 nested list item different type 

i expecting last 1.1 result starting aas have mentioned type itbut it's not working. what's wrong doing here?

here jsfiddle.

as of mdn, ol , ul elements can contain li element. 1 thing done, second css. display: table; messing things along list-style-type: none;. use developer console figure rest.

<ol>     <li>this second list item</li>     <li>         <ol type = "a">             <li>nested list item different type</li>             <li>xyz</li>         </ol>     </li> </ol> 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -