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

Solution 1:

Hey now you can used CSS counter-increment Property

As like this Css

body {counter-reset:section;}
    h1 {counter-reset:subsection;}
    h1:before
    {
    counter-increment:section;
    content:"Section "counter(section) ". ";
        font-weight:bold;
    }
    h2:before
    {
    counter-increment:subsection;
    content:counter(section) "."counter(subsection) " ";
    }

HTML **

<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><h2>JavaScript</h2><h2>VBScript</h2><h1>Heading </h1><h2>One </h2><h2>Two</h2>

**

Live demo http://jsfiddle.net/PfcX2/1/

More info click here https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

Solution 2:

To answer the question "If I only have an h2, how do I suppress the leading 1?": alter the h2::before style selector so the h2 must follow the h1:

h1::before ~ h2::before {
  // your h2 attributes go here
}