Skip to main content
Home
Dave Lane

Main navigation

  • Abilities
  • Blog
  • CV
  • About
    • About
    • This Site
    • Commercial Terms
  • Contact
User account menu
  • Log in

Breadcrumb

  1. Home

Creating Legal List Numbering only using CSS

Profile picture for user dave
By dave , 10 May 2015

If you want to create lists with legal style numbering, here's a way to do it. It's quick, clean, and tidy. It results in lists that automatically do this sort of thing:

1. Section

1.1 Clause

   1.1.1 Sub-Clause

     1.1.1.1 Sub-Sub-Clause

And here's some sample HTML Code:

Sample of Legal List using CSS

Sample of Legal List Numbering using CSS

Section One

  1. Clause One
  2. Clause Two
    1. Clause Two sub One
    2. Clause Two sub Two
    3. Clause Two sub Three
  3. Clause Three

Section Two

  1. Clause One
  2. Clause Two
  3. Clause Three
    1. Clause Three sub One
      1. Clause Three sub One sub One
      2. Clause Three sub One sub Two
      3. Clause Three sub One sub Three
    2. Clause Three sub Two
    3. Clause Three sub Three

The key thing to note with the above content is that the ID "legal-list" is on the "body" tag in this case - that means all ordered lists on this page will be numbered this way. If you want to limit it, just put the ID in the block containing the list you want to number.

The CSS looks like this:

/* legal list styles */ #legal-list { counter-reset: section; } #legal-list h2:before { counter-increment: section; content: counter(section) ". "; margin: 0 0.5em 0 0; } #legal-list ol { counter-reset: clause; list-style: none outside none; text-indent: -2em; } #legal-list ol li { counter-increment: clause; } #legal-list ol li:before { content: counter(section) "." counters(clause, ".") ". "; margin: 0 0.5em 0 0; }

And here's what it should look like (in this case, I put the id="legal-list" the div block surrounding the list):

Section One

  1. Clause One
  2. Clause Two
    1. Clause Two sub One
    2. Clause Two sub Two
    3. Clause Two sub Three
  3. Clause Three

Section Two

  1. Clause One
  2. Clause Two
  3. Clause Three
    1. Clause Three sub One
      1. Clause Three sub One sub One
      2. Clause Three sub One sub Two
      3. Clause Three sub One sub Three
    2. Clause Three sub Two
    3. Clause Three sub Three

To try this, just download the attached files (or copy and paste the blocks above into your own files with the same names) and open the legal-list-sample.html file in your browser.

For a working example of a legal document, see the Terms and Conditions on this site.

Note to commenters: due to problems with spam comments, your comment will only appear on this site after it's been deemed (by me) to be legitimate.

Blog posts

Pharmakon - the Morphine Paradox
13 Dec 2024 - 13:19
Post-corporate future pipedream
13 Dec 2024 - 13:10
Why 'free' proprietary software will always end in tears
4 Oct 2023 - 01:00
Missing link in South Christchurch active transport network: the Gauntlet
21 Sep 2023 - 09:08
Aotearoa government IT concerns
18 Sep 2023 - 09:41
Why the covered CBD Stadium is a horrible idea for Christchurch
23 Sep 2022 - 21:02
Are we worthy?
5 Apr 2022 - 10:15

Pagination

  • Previous page
  • 2
  • Next page
More posts...
RSS feed

Creative Commons License - CC By attribution, Share alike - International 4.0

Contact Dave!
Download Dave's CV
Eliminate DRM!

Contact Modes

Social Media

Software

Terms of Engagement
Terms of Reference
Powered by Drupal