Insert CSS parent section counter for nested lists

Question

I have a 2 level ul. I am using counter-reset, counter-increment, and content to insert a running counter. It works in that the content in the lis is numbering correctly.

I have and a link in the first level li, after its nested ul that I want to say "Add To Rule [number of parent li]".

Below is a minimum working example of what I am doing. In the a link, it is using the counter for the 2nd level ul/li.

What it outputs:

Rule 1
- Rule 1.1
  ...
- Rule 1.2
  ...
- Rule 1.3
  ...
Add To Rule 1.3
Rule 2
- Rule 2.1
  ...
- Rule 2.2
  ...
- Rule 2.3
  ...
Add To Rule 2.3
Rule 3
- Rule 3.1
  ...
- Rule 3.2
  ...
- Rule 3.3
  ...
Add To Rule 3.3

What I am trying achieve:

Rule 1
- Rule 1.1
  ...
- Rule 1.2
  ...
- Rule 1.3
  ...
Add To Rule 1
Rule 2
- Rule 2.1
  ...
- Rule 2.2
  ...
- Rule 2.3
  ...
Add To Rule 2
Rule 3
- Rule 3.1
  ...
- Rule 3.2
  ...
- Rule 3.3
  ...
Add To Rule 3

I can't figure out what I need to do to get my expected/wanted output.

ul
{
  counter-reset: section;
}

li
{
  counter-increment: section;
}

.ruleNumber::after
{
  content: counters(section, ".");
}

a::after
{
  content: counters(section, ".");
}

<ul>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
</ul>

Kosh · Accepted Answer · 2020-01-28T21:14:15.063

You might use two separate counters -- one for sections and one for items:

ul {
  counter-reset: section;
}

ul ul {
  counter-reset: item;
  counter-increment: section;
}

li {
  counter-increment: item;
}

.ruleNumber::after {
  content: counters(item, ".");
}

a::after {
  content: counters(section, ".");
}

<ul>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
</ul>

Insert CSS parent section counter for nested lists

1 Answers1

Linked