Removing border from last div - html

Question

I'm struggling to remove the border from my last div, here's my code:
<div class="media">
<a class="pull-left" href="producten.php?product=<?php echo $key; ?>">
<img class="media-object" src="img/<?php echo $key; ?>.png">
</a>
<div class="media-body">
<h4 class="media-heading"><?php echo $output["naam"]; ?></h4>
<div class="row">
<div class="col-sm col-xs-10">
<p><?php echo $output["omschrijving"]; ?></p>
</div>
<div class="col-sm-2 col-xs-2">
<p class="pull-right">Prijs:<b><?php echo $output["prijs"]; ?></b></p>
</div>
</div>
</div>
</div>
and my CSS:
.media {
padding-left: 1em;
padding-right: 1em;
border-bottom: 1px solid #000;
padding-top: 10px;
padding-bottom: 10px;
}
.media:last-of-type {
padding-left: 1em;
padding-right: 1em;
padding-top: 10px;
padding-bottom: 10px;
color: red;
}
But this doesn't seem to work, please note that I'm using Bootstrap en forgive me that some words are in Dutch or the PHP may be rubbish (But that's why I'm learning).

Answer 1

IE7/IE8 doesn't support last-child AFAIK.
Maybe you could reverse the order of the borders, instead of removing (border-bottom) from the last one, then remove it (border-top) from the first one instead? You wouldn't even need to put it on:
.media + .media {border-top: 1px solid #000000;}
Or something similar to someway reverse it and aim for the first child instead (or everyone but the first child as above)
EDIT: Updated code to probably suit your example better

Answer 2

:last-child only works when the element in question is the last child of the container. :last-of-type is for the last of a specific type of element.
.media:last-child {
border:none;
}

Answer 3

Try something like this:
div.media:last-child{
}

Answer 4

what about to reset borders too ?
.media:last-of-type {
padding-left: 1em;
padding-right: 1em;
padding-top: 10px;
padding-bottom: 10px;
color: red;
border:none;
}

Answer 5

You can try below code:
.media:last-child{
border:0;
}