CODEWITHSUNDEEP
htmlcss
TheRealPapa
TheRealPapa

Reputation: 4539

CSS targetting last child container of class

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;
}

Upvotes: 2

Views: 66

Answers (2)

Naourass Derouichi
Naourass Derouichi

Reputation: 793

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.

Upvotes: 1

zer00ne
zer00ne

Reputation: 43910

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>

Upvotes: 0

Related Questions