JSFiddle - React, Tailwind, and code Playground

by iamnotsam

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> <!-- <- need to select this -->
    <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> <!-- <- need to select this -->
    <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> <!-- <- need to select this -->
</div>

CSS

.first.bb:last-child, .last-first-bb {
    color: red;
}

JavaScript

// With jQuery way
//$('.bb + :not(.bb)').prev().addClass('last-first-bb'); 

// With just JavaScript
var elements = document.querySelectorAll('.bb + :not(.bb)');

var className = 'last-first-bb';
Array.prototype.forEach.call(elements, function(el, i){
    var el = el.previousElementSibling;
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
});