title: Targeting the last div before flexbox or float wraps the rest
body: <p>I am wondering if there is a CSS selector that would auto-magically target the last div on a row created by either flexbox or floats.</p>
  
  <p>In our particular use, we have an image grid with different width images.  In its full width, there are rows with 3 images (each 33%) and rows with 2 images (50/50 or 60/40).  When viewed with a vertical tablet all images change to 50% and it is two per row, on a phone 100%.  All of the images are within a single overall container, not row containers (because of the three becoming two).</p>
  
  <p>Like many grid type layouts we have a 2% margin-right, that needs to be reset to 0 on the right most div.</p>
  
  <p>Currently using the traditional "last" class to remove the margin manually and a pseudo :nth-child(odd) to manipulate the vertical tablet layout. I am playing with two variations, one using floats and one using flexbox.</p>
  
  <p>Is there a single css selector that would target the last div in each case?</p>
  
  <hr>
  
  <p>Expanding on layouts:</p>
  
  <p>On full sized monitor<br>
  |img1 - 33%|2%|img2 - 33%|2%|img3 - 33%|<br>
  |img4 - 40%|2%|img5 - 60%|<br>
  |img6 - 33%|2%|img7 - 33%|2%|img8 - 33%|  </p>
  
  <p>On a vertical tablet<br>
  |img1 - 50%|2%|img2 - 50%|<br>
  |img3 - 50%|2%|img4 - 50%|<br>
  |img5 - 50%|2%|img6 - 50%|<br>
  |img7 - 50%|2%|img8 - 50%|  </p>
  
  <p>On phone<br>
  |img1 - 100%|<br>
  |img2 - 100%|<br>
  |img3 - 100%|<br>
  |img4 - 100%|<br>
  etc
  ps I know my percentages do not add up.</p>