CSS: select last div with specific class [duplicate] - html

Question

This question already has answers here:
CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
(2 answers)
Closed 3 years ago.
<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>

Answer 1

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>

Answer 2

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>