qazwsx qazwsx - 1 year ago 73
CSS Question

How to add section numbers (1.2, 3.4.1) automatically using CSS?

How to add section numbers (1.2, 3.4.1) automatically using CSS?

I currently have

h1, h2, h3, h4 {
font-weight: normal;
h1 { font-size: 140%; }
h2 { font-size: 120%; color:#049;}
h3 { font-size: 110%; color:#06C;}
h4 { font-size: 105%; color:#09C;}

How to modify them so section numbers such as 1.3, 2.4.5 are automatically constructed depending on the nesting level and order of appearance of the section headers?





should show

  1. heading21

    1.1 heading31

  2. heading22

or something along those lines.

Answer Source

Hey now you can used CSS counter-increment Property

As like this Css

   body {counter-reset:section;}
    h1 {counter-reset:subsection;}
    content:"Section " counter(section) ". ";
    content:counter(section) "." counter(subsection) " ";


<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h1>Heading </h1>
<h2>One </h2>


Live demo

More info click here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download