Separate ordered lists with continuous numbering by CSS counter

Question

I need to create ordered lists for a specific type of genealogy report called a register. In a register, all children are numbered with lower-case Roman numerals, and those with descendants also get an Arabic numeral, like this:

First Generation
1. Joe Smith
   2    i. Joe Smith Jr.
       ii. Fred Smith
   3  iii. Mary Smith
       iv. Jane Smith

Second Generation
2. Joe Smith Jr.
       i. Oscar Smith
   4  ii. Amanda Smith
3. Mary Smith
   5   i. Ann Evans

You can see my initial attempt on this fiddle: https://jsfiddle.net/ericstoltz/gpqf0Ltu/

The problem is that the Arabic numerals need to be consecutive from generation to generation, that is, over separate ordered lists. When you look at the fiddle, you can see the second generation begins again at 1 for Arabic numerals, but it should begin with 2 because that's the number assigned to that person as the child of 1, and the first of 2's children with descendants should be 4 instead of 5. So the counter is continuing on to the second list in some partial way when I need it to be more consistent.

To clarify: this is not just about sequential numbering. Each person with descendants is identified by a unique number, and that number will appear twice: With that person as a child and with that person as a parent.

The generations need to be separated because of the headings and sometimes there is narrative between them.

I feel I am very close and am just overlooking something to get this to work!

UPDATE: SOLVED. See fiddle for how I did this with two counters.

Tirthraj Barot · Answer 1 · 2016-06-15T05:48:01.547

Yes it can be done using the start attribute within the <ol>.

Your code should be as follows.

Register report

First generation

George Smith.

Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles, Los Angeles, California.

article {
  counter-reset: parent-counter;
}
.register-section ol {
  margin-left: -25px;
}
.register-section li {
  position: relative;
}
.register-section li ol {
  margin-left: 50px;
  text-indent: 15px;
}
.parent {
  counter-increment: parent-counter;
}
.parent:before {
  content: counter(parent-counter);
  display: block;
  position: absolute;
  margin-left: -75px;
  top: 0;
}

<article>
  <h1>Register report</h1>
  <section class="register-section">
    <h2>First generation</h2>
    <ol>
      <li class="parent">
        <span class="spouse">George Smith.</span>
        <p>Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles,
          Los Angeles, California.</p>

        <p>They had the following children:</p>
        <ol type="i" class="children">
          <li>
            Roger Smith.
            <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            David Smith.

          </li>
          <li>
            Amanda Smith.
            <p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Jane Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
  <section class="register-section">
    <h2>Second generation</h2>
    <ol start=2>
      <li class="parent"><span class="spouse">David Smith</span>
        <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California. On 1 Jan 1947, when he was 20 years old, David married Margaret Adams, daughter of William Adams and Amelia Winter, in Los Angeles, Los Angeles, California. Born 1 Jan 1930 in Los Angeles,
          Los Angeles, California.</p>
        <p>They had the following children:</p>
        <ol start=4 type="i" class="children">
          <li>
            Edward Smith.
            <p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Henry Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
</article>

Well that solves the problem of the first person in the second generation being numbered as 2, but his first child with descendants is still 5 when he should be 4. — Eric Stoltz, Jun 15 '16 at 05:38
I edited the example in the question to make it a little clearer. — Eric Stoltz, Jun 15 '16 at 05:42
can we not use start tag again? as I did in the updated answer? — Tirthraj Barot, Jun 15 '16 at 05:48
I mean this seems to be a lot of data.. So obviously you will be getting it through some script.. So it would be easy to give the start attribute where ever required. @EricStoltz — Tirthraj Barot, Jun 15 '16 at 05:49
Well, once you get to about the sixth or seventh generation it would quickly become a nightmare to hard-code all that in for dozens of descendants. — Eric Stoltz, Jun 15 '16 at 05:50
that would make a tree structure and it is better to number them manually using the ol type="none" — Tirthraj Barot, Jun 15 '16 at 05:52

score 0 · Answer 2 · answered Jun 15 '16 at 09:58

Solution using CSS-Counter. Use below code.

article {
   padding: 1em;
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
   
   counter-reset: section;
 }

 section{
   counter-increment: section;
 }

 section h4:before {
   content: counter(section) '. ';
 }

 ol{
  counter-reset: count;
 }
 
 li:before {
    content: counter(count)".";
    counter-increment: count;
 }

 li:not(.count) {
   padding-left: 13px;
 }

 li:not(.count):before {
   display: none;
 }

<article>

    <h1>Register report</h1>

     <section>

     <h2>First generation</h2>
     <ol>
        <li type="none">
          <h4>George Smith.</h4>
          <p>Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles, Los Angeles, California.</p>

          <p>They had the following children:</p>

          <ol type="i" class="children">

             <li class="count">Roger Smith.
               <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
             </li>
             <li>David Smith.</li>
             <li class="count">Amanda Smith.
               <p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
             </li>
             <li>Jane Smith.</li>
          </ol>

        </li>
     </ol>
  </section>

  <section>

     <h2>Second generation</h2>
      <ol> 
         <li type="none">
          <h4>David Smith</h4>
          <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California. On 1 Jan 1947, when he was 20 years old, David married Margaret Adams, daughter of William Adams and Amelia Winter, in Los Angeles, Los Angeles, California. Born 1 Jan 1930 in Los Angeles, Los Angeles, California.</p>

          <p>They had the following children:</p>
           <ol type="i">
              <li>Edward Smith.
               <p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
              </li>
              <li class="count">Henry Smith.</li>
           </ol>
         </li>
      </ol>
  </section>
</article>

This is still not a solution. There can only be one person with the same number. That's the problem. It's easy to just number everything sequentially; that's not what the issue is. George, Roger and Henry cannot all have the number 1. Amanda and David cannot both be number 2. Do you see? Each Arabic number represents an individual and only that individual. — Eric Stoltz, Jun 15 '16 at 15:03

Separate ordered lists with continuous numbering by CSS counter

2 Answers2

Register report

First generation