JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<div id="container">
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
    <div fixed></div>
</div>

CSS

div > div {
    width:20px;
    height:20px;
    margin:1em;
    background:grey;
}
.first-set {
    background:red;
}
.last-set {
    background:green;
}

JavaScript

var firstSet = true;
[].forEach.call(document.getElementById("container").children, function(el){
  if(firstSet && el.hasAttribute('fixed')) {
    el.classList.add('first-set');
  } else {
    firstSet = false;
  }
  if(!firstSet && el.hasAttribute('fixed')) {
    el.classList.add('last-set');
  }
});