Is it possible to style the last instances of .first.bb before each .first.a element without altering the HTML structure? Keep in mind that DIV.first elements are dynamically added and may change. Also, the last .first.bb within #wrapper should already be styled accordingly.
html
<div id="wrapper">
<div class="first">first</div>
<div class="first bb">first second</div>
<div class="first bb">first second</div>
<div class="first bb">first second</div> <!-- <- this should be selected -->
<div class="first a">first</div>
<div class="first a">first</div>
<div class="first a">first</div>
<div class="first bb">first second</div>
<div class="first bb">first second</div>
<div class="first bb">first second</div>
<div class="first bb">first second</div> <!-- <- this should be selected -->
<div class="first a">first</div>
<div class="first a">first</div>
<div class="first a">first</div>
<div class="first bb">first second</div> <!-- <- this should be selected -->
</div>
css
.first.bb:last-child {
color:red;
}
.first.bb + .first.a {
color:red;
}