CODEWITHSUNDEEP
htmlcss
AturSams
AturSams

Reputation: 7952

html css styled ordered list with letters digits and numbers?

We have an ordered list

<ol>
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

Normally it would display as:

  1. something good
  2. even better
  3. possibly the best

Is there any way to make it display as:

a1. something good

a2. even better

a3. possibly the best

And then the next list could be:

b1. bla bla bla

b2. a second list item

Thanks.. The general question is that I want a character and a symbol as well as a digit.

Upvotes: 1

Views: 5796

Answers (5)

osyan
osyan

Reputation: 1856

Add this to your CSS:

.A ol {list-style: none; counter-reset: chapter 1;}
.A ol li+li {counter-increment: chapter 1; list-style: none;}
.A ol li:before {content: "a" counter(chapter) ". ";}


.B ol {list-style: none; counter-reset: chapter 1;}
.B ol li+li {counter-increment: chapter 1; list-style: none;}
.B ol li:before {content: "b" counter(chapter) ". ";}

AND Do like this:

<div class="A">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>             
    <ol>
</div>
<div class="B">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>           
    <ol>
</div>

Click here! This works as well.

Upvotes: 0

osyan
osyan

Reputation: 1856

Add this to your CSS

.A li:before 
   {
    content: "A";
   }
.B li:before 
   {
    content: "B";
 }

And change your list to something like this:

<ol class="A">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>
<ol class="B">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

Upvotes: 1

javascript is future
javascript is future

Reputation: 895

Try this: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

Upvotes: 0

Alvaro
Alvaro

Reputation: 9662

Searching through this page I could find two answers that gave me the solution.

counter-increment in CSS

HTML list-style-type dash

Reusing one of the fiddles from those I created one that suits your needs:

http://jsfiddle.net/DDNEB/1/

For the list you need a:

ol {counter-reset: chapter 1; list-style: none;}

Which permits you create the variable. Then:

ol li+li {counter-increment: chapter 1; list-style: none;}

Will increment it for each li And finally:

ol li:before {content: "a" counter(chapter) ".";}​

Content before will create the specified content, in this case a (change it with b or whatever) + number + . .

Hope it helps.

Upvotes: 2

aqua
aqua

Reputation: 3375

This is one way to do it... not quite what you want, but...

<ol type="a">
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
</ol>

Upvotes: 0

Related Questions