Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selecting the last element among various nested containers

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>
like image 399
Oliver Castillo Avatar asked Jul 23 '15 23:07

Oliver Castillo


People also ask

How do you find the last element of a class?

To select the last element of a specific class, you can use the CSS :last-of-type pseudo-class.

Which selector will only target the last list item?

The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

How do you select all the elements except the last child?

When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.


1 Answers

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).

like image 97
Michael Benjamin Avatar answered Sep 28 '22 15:09

Michael Benjamin