CSS targetting last child container of class - html

Question

Not sure this is possible with CSS only. Any help is appreciated.
My HTML looks like this:
<div class="row invoice with-tax">
<div class="mobile-body-header mobile"><strong>Items</strong></div>
<div class="invoice-item">
<div class="item-filler"></div>
<div class="quantity">2</div>
<div class="amount-mobile total">$13,336.60</div>
<div class="item-number">ABC123</div>
<div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
<div class="amount-item-ex">$153.00</div>
<div class="amount-subtotal">$306.00</div>
<div class="amount-tax">$30.60</div>
<div class="amount-total total">$13,336.60</div>
<div class="item-filler"></div>
</div>
<div class="invoice-item">
<div class="item-filler"></div>
<div class="quantity">2</div>
<div class="amount-mobile total">$13,336.60</div>
<div class="item-number">ABC123</div>
<div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
<div class="amount-item-ex">$153.00</div>
<div class="amount-subtotal">$306.00</div>
<div class="amount-tax">$30.60</div>
<div class="amount-total total">$13,336.60</div>
<div class="item-filler"></div>
</div>
....
</div>
I am trying to remove the border-bottom of the final div with class title in the last div with class invoice-item. These are essentially rows of div elements that can vary in numbers (as it is and invoice I am working on).
I have tried unsuccessfully the examples below. Although I can see it working in the Fiddle from #Steve below it is not removing the last border when placed inside the rest of the CSS. And I can confirm the border is set just above per the examples below.
div.invoice-item > div.title {
border-bottom: 2px dotted red;
}
div.invoice-item:last-child > div.title {
border: none !important;
}
also
div.invoice-item > div.title {
border-bottom: 2px dotted red;
}
div.invoice > div.invoice-item:last-child > div.title {
border: none !important;
}
also
div {
border-bottom: 1px solid red;
}
div.invoice-item:last-of-type > div.title {
border: none;
}

Answer 1

Since it's an e-mail template, there are some clients that doesn't support :last-child. Instead of using :last-child, try to add a new Class to the div that you want to select.

Answer 2

Try div.invoice-item:last-of-type > div.title { border: none; }
UPDATE
Since there's an unknown CSS evil, here's a trick that might work:
div.invoice-item:last-of-type > div.title.title { border: none !important; }
div {
border-bottom: 1px solid red;
}
/* div.invoice-item:last-of-type > div.title {
border: none;
} */
div.invoice-item:last-of-type > div.title.title {
border: none !important;
}
<div class="row invoice with-tax">
<div class="mobile-body-header mobile"><strong>Items</strong>
</div>
<div class="invoice-item">
<div class="item-filler"></div>
<div class="quantity">2</div>
<div class="amount-mobile total">$13,336.60</div>
<div class="item-number">ABC123</div>
<div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
<div class="amount-item-ex">$153.00</div>
<div class="amount-subtotal">$306.00</div>
<div class="amount-tax">$30.60</div>
<div class="amount-total total">$13,336.60</div>
<div class="item-filler"></div>
</div>
<div class="invoice-item">
<div class="item-filler"></div>
<div class="quantity">2</div>
<div class="amount-mobile total">$13,336.60</div>
<div class="item-number">ABC123</div>
<div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
<div class="amount-item-ex">$153.00</div>
<div class="amount-subtotal">$306.00</div>
<div class="amount-tax">$30.60</div>
<div class="amount-total total">$13,336.60</div>
<div class="item-filler"></div>
</div>
....
</div>