hide last hr within a loop using css - html

Question

I have nested <hr> tag in my html, without using specified traversing, how can I hide the last hr using css but not js? I can skip the loop using js but I want to use pure css, not sure why :nth-of-type(1) hide all the <hr>
<div class="modal-body">
<div class="row">
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Indonesia</strong></div>
<div>
<div class="item">
<label>
<div class="item">
<label>
<span>Lazada ID</span></label>
</div>
</div>
<hr>
</div>
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Malaysia</strong></div>
<div>
<div class="item">
<label>
<span>Lazada MY</span></label>
</div>
<div class="item">
<label>
<span>Lelong MY</span></label>
</div>
</div>
<hr>
</div>
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Others</strong></div>
<div>
<div class="item">
<label>
<span>Alibaba</span></label>
</div>
</div>
<hr>
</div>
</div>
</div>
https://jsfiddle.net/g59e21ps/1/

Answer 1

Your solution is here...
.modal-body .row div:last-child hr {
display: none;
}

Answer 2

:nth[-last]-of-type is the nth last child of a given tag type in its parent element – not the nth last match in the entire document. You can find <hr>s that are children of last children with the child combinator >:
.modal-body :last-child > hr {
display: none;
}
updated fiddle

Answer 3

Try the following snippet.
.modal-body .row div:last-child hr {
display: none;
}
<div class="modal-body">
<div class="row">
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Indonesia</strong></div>
<div>
<div class="item">
<label>
<div class="sa-checkbox theme__blue checked" style="position: relative;">
<input type="checkbox" cursor="false" name="5a60626f1d41c80c8d3f8a85" value="on" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0; cursor: pointer;"></ins></div><span>Bukalapar</span></label>
</div>
<div class="item">
<label>
<span>Lazada ID</span></label>
</div>
</div>
<hr>
</div>
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Malaysia</strong></div>
<div>
<div class="item">
<label>
<span>Lazada MY</span></label>
</div>
<div class="item">
<label>
<span>Lelong MY</span></label>
</div>
</div>
<hr>
</div>
<div class="m-l-20 m-r-20">
<div><strong class="m-b-10">Others</strong></div>
<div>
<div class="item">
<label>
<span>Alibaba</span></label>
</div>
</div>
<hr>
</div>
</div>
</div>