DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • What Is Test Pyramid: Getting Started With Test Automation Pyramid
  • Apache Kafka vs. Message Queue: Trade-Offs, Integration, Migration
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Build a Simple Chat Server With gRPC in .Net Core
  1. DZone
  2. Coding
  3. Languages
  4. Automatically numbering headings via CSS

Automatically numbering headings via CSS

Axel Rauschmayer user avatar by
Axel Rauschmayer
·
Jan. 13, 12 · Interview
Like (0)
Save
Tweet
Share
10.27K Views

Join the DZone community and get the full member experience.

Join For Free

This post shows you how to number HTML headings with CSS. That is, given the following HTML.

    <h1>My Article</h1>
    <h2>Introduction</h2>
    <h3>Rationale</h3>
    <h2>Background</h2>
With the proper CSS, the above will be displayed as
My Article
1. Introduction
1.1. Rationale
2. Background

Number the headings

To number the headings, we need the CSS construct counter. A counter is an integer variable for which there are there operations: reset, increment, read (in CSS content). To achieve the result shown above, the following CSS suffices:
    body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
    }
    h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
Comments:
  • The above CSS resets the counter for the first numbering level called h2counter when it enters the body. Just to be safe, we reset it again at h1.
  • The pseudo-class :before allows us to insert content before the inside of a tag.
  • The character \0000a0 is a non-breaking space in CSS. Hence there are always two non-breaking spaces after the last dot of each heading number.

Switch off numbering for some headings

Sometimes we want a single heading to not be numbered. The following CSS does not number headings that have a class nocount.
  
  body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
    }
    h2.nocount:before {
        content: none;
        counter-increment: none;
    }
    
    h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
    h3.nocount:before {
        content: none;
        counter-increment: none;
    }
We follow each counter clause with a non-counter version that becomes active in the presence of the class nocount and prevents the counter from being displayed and incremented.

Non-numbered headings by default

If you want to be able to choose between all headings being numbered and no headings being numbered, you have two options:
  1. Numbering is on by default: You can switch it off, e.g. by putting a class nocount in a surrounding tag. That can be achieved by replacing the single selector
        h2.nocount:before
    with two selectors:
        .nocount h2:before, h2.nocount:before
  2. Numbering is off by default: Then you prefix the :before rules with a condition, e.g. whether the class countheads is present in a surrounding tag:
        .countheads h2:before
    
The CSS shown below is a variation of idea #2: Switch on numbering if a sibling tag of h2 has a class countheads. The general sibling combinator ~ (tilde) lets us do that:
    body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    
    .countheads ~ h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
    }
    h2.nocount:before {
        content: none;
        counter-increment: none;
    }
    h2 {
        counter-reset: h3counter;
    }
    
    .countheads ~ h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
    h3.nocount:before {
        content: none;
        counter-increment: none;
    }

Conclusion

We have seen how to automatically count headings in HTML via CSS and how to conditionally switch it off in some places. You can download a demo file (view online) on GitHub.

 

From http://www.2ality.com/2012/01/numbering-headingshtml.html

CSS

Opinions expressed by DZone contributors are their own.

Trending

  • What Is Test Pyramid: Getting Started With Test Automation Pyramid
  • Apache Kafka vs. Message Queue: Trade-Offs, Integration, Migration
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Build a Simple Chat Server With gRPC in .Net Core

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: