CSS: select last div with specific class

Question

<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

How do I select last div with class="custom"? I have to add border-bottom to div with text3. I tried:

.class1 .custom:last-of-type {
  border-bottom: 1px solid;
}

...But then border-bottom is added to all div's with class="custom". I need CSS solution only, no JS. Also there could be any amount of <li> so I can't use :nth-child().

Update: This layout is generated from Prime NG component <p-autocomplete> The code is:

<p-autocomplete ....>
  <ng-template let-item pTemplate="item">
    <div [ngClass]="{'custom'}: item.isCustom">
      {{item.name}}
    </div>
  </ng-template>
</p-autocomplete>

@04FS as the custom divs are not siblings, that is not a duplicate. — Pete, Sep 20 '19 at 09:06
There is currently no way to do this with css alone, you'll probably need to use your server side language to do it - (I guess that's what is applying the custom class) — Pete, Sep 20 '19 at 09:07
Ah probably one for the angular gurus then - In you js code, I would apply an extra class to the last item that isCustom (or add a property so that you could apply it in your ngClass statement) — Pete, Sep 20 '19 at 09:31
@Pete, Ok then. The main question was if it's possible to do with CSS only. So I will try to do it with js. — Kos, Sep 20 '19 at 09:38

score 1 · Answer 1 · answered Sep 20 '19 at 09:16

I agree with the comments saying that a pure-CSS solution is not existing, because it is not possible to aggregate special selectors like :last-of-type as for example (.class1 .custom):last-of-type (not working).

What i propose is a simple JQuery solution:

$(".class1 .custom").last().parents(".class1").addClass("custom2");

.custom2{
   border-bottom: 1px solid;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

score 0 · Answer 2 · answered Sep 20 '19 at 09:43

I'm not proud of this, but it's CSS only and it works.

.class1 .custom {
  border-bottom: 1px solid;
  position: relative;
}

.class1 .custom::before {
  display: block;
  content: '';
  position: absolute;
  border-top: 1px solid white;
  width: 100%;
  top: -1px;
}

<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

CSS: select last div with specific class

2 Answers2