html - Selecting the last element among various nested containers

Question

How can I select the last and deepest element in CSS?

Is there a way to improve this css code?

What solution do you proposed for a deep tree? (~15-25).

I'm avoiding using javascript. But SASS solutions are welcome.(maybe using @for?)

/*level 1*/

div.case > ul:last-child > li.leaf:last-child > div {
  font-weight: bold;
  background: red;
}
/*level 2*/

div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: blue;
}
/*level 3*/

div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: green;
}
/*level 4*/

div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: yellow;
}

<div class="case">
  <h1>Case 0</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="leaf">
      <div>3. content (bold)</div>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 1</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
        <li class="leaf">
          <div>3. content (bold)</div>
        </li>
      </ul>
    </li>
  </ul>
</div>


<div class="case">
  <h1>Case 2</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="leaf">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
        <li class="leaf">
          <div>3. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>1. content a</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content (bold)</div>
            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>


<div class="case">
  <h1>Case 3</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>2. content</div>
          <ul>
            <li class="expanded">
              <div>1. content</div>
              <ul>
                <li class="leaf">
                  <div>1. content</div>
                </li>
                <li class="leaf">
                  <div>2. content (bold)</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 4</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="expanded">
          <div>2. content</div>
          <ul>
            <li class="expanded">
              <div>1. content</div>
              <ul>
                <li class="leaf">
                  <div>1. content</div>
                </li>
                <li class="leaf">
                  <div>2. content</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content(bold)</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 5</h1>
  <ul>
    <li class="leaf">
      <div>content 1</div>
    </li>
    <li class="leaf">
      <div>content 2</div>
    </li>
    <li class="leaf">
      <div>content 3(bold)</div>
    </li>
  </ul>
</div>

Answer 1

If I understand your question correctly, you want to target the last li tag in multiple uls, where the number of nesting levels in the uls is unpredictable.

You want a selector that targets the "last and deepest element" in a containing block where the number of elements preceding it in the block are unknown and irrelevant.

This doesn't appear to be possible with Selectors 2.1 or Selectors 3.

The :last-child, :last-of-type and nth-child pseudo-classes work when the nesting levels are fixed. In a dynamic environment where there are multiple lists of varying nesting levels these selector rules will break.

This will select the last li in the first level ul:

div.case > ul > li:last-child

This will select the last li in the second level ul:

div.case > ul > li:last-child > ul > li:last-child

This will select the last li in the third level ul:

div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child

and so on...

A solution, however, may exist in Selectors 4, which browsers haven't yet implemented:

li:last-child:not(:has(> li))

This rule targets last child lis that have no descendant lis, which matches your requirement.

For now, however, if you know the nesting level for each of your ul containers you can apply a class to each targeted li.

^{Thanks @BoltClock for help crafting the Selectors 4 rule (see comments).}