Semantic List CSS

CSS for putting semantic numbers into nested list.

Usage

Install

Download semantic-list.css and include it to your HTML. Also available on npm.

Download: semantic-list.css
$ npm install semantic-list --save

Example

Create <ol> element with "semantic-list" class.

<ol class="semanic-list">
  <li>List item
    <ol>
      <li>List item
        <ol>
          <li>List item</li>
          <li>List item</li>
        </ol>
      </li>
      <li>List item</li>
    </ol>
  </li>
  <li>List item</li>
</ol>

List item will have 1, 1.1, 1.1.1, ... marker according to the depth.

1 List item
  1.1 List item
    1.1.1 List item
    1.1.2 List item
  1.2 List item
2 List item

Marker types

Add optional class to change the marker type.

dot (default)

<ol class="semantic-list"> or <ol class="semantic-list dot">

1 List item
  1.1 List item
    1.1.1 List item
    1.1.2 List item
  1.2 List item
2 List item

hyphen

<ol class="semantic-list hyphen">

1 List item
  1-1 List item
    1-1-1 List item
    1-1-2 List item
  1-2 List item
2 List item

ja-formal

<ol class="semantic-list ja-formal">

Follows 公用文作成の要領. 第1 → 1 → (1) → ア → (ア)

第1 List item
  1 List item
    (1) List item
    (2) List item
  2 List item
第2 List item

ja-semi-formal

<ol class="semantic-list ja-semi-formal">

1 → (1) → (ア)

1. List item
  (1) List item
    (ア) List item
    (イ) List item
  (2) List item
2. List item

htanjo / semantic-list