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>

Answer 1

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>