Target last instance of class in parent

Question

I have said divs:

<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>
<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>

I want to style the last p1 div in each parent div. I've tried some last-child code, but it doesn't want to take. Any ideas?

Answer 1

This can't be done with pure css. I reccomend this using jquery:

$("div").find(".p1:last").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>