1

Without knowing a structure of html, I would like to select the last element .foo inside .main. In other words the closest element of class .foo to closing tag of .main.

<div class="main">
  <div class="foo a">
    a
  </div>
  <div class="foo b">
    b
    <div class="foo c">
      c - select only this (last .foo among all descendants)
    </div>
    <div class="d">
      d
    </div>
  </div>
</div>

Of course I can .main > .foo > .foo but I want a generic solution.

MaciejLisCK
  • 3,706
  • 5
  • 32
  • 39
  • 5
    cannot be done with css – Pete Dec 03 '19 at 15:48
  • Worth adding though, that even though this cannot be done with css alone, it's relatively straightfoward to achieve with js and css: `let allFooInMain = [... document.querySelectorAll('.main .foo')]; let lastFooInMain = allFooInMain[(allFooInMain.length - 1)]; lastFooInMain.classList.add('last-foo-in-main');` Then you can style `.last-foo-in-main`. – Rounin Dec 06 '19 at 14:14

0 Answers0