JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>4</li>
  <li style="display:none">1</li>
  <li  style="display:none">2</li>
  <li style="display:none">3</li>
  <li>4</li>
  <li style="display:none">5</li>
  <li>6</li>
  <li>7</li>
     <li>8</li>
    <li style="display:none">9</li>
    <li style="display:none">10</li>
    <li style="display:none">10</li>
    <li>11</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
     <li>11</li>
    <li>11</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li><li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li><li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li style="display:none">12</li>
    <li style="display:none">13</li>
    <li>11</li>
    <li>11</li><li>11</li>
    <li>11</li><li>11</li>
    <li>11</li><li>11</li>
    <li>11</li><li>11</li>
    <li>11</li><li>11</li>
    <li>11</li>
</ul>

CSS

ul li{
    background: lightslategrey
}
ul li:first-child{
  background: blue;
}
ul li[style*="display:none"] + li:not([style*="display:none"]){
  background: blue;
}
ul li:not([style*="display:none"]) + li{
  background: blue;
}
ul > li:not([style*="display:none"]) ~ *{
  background: lightslategrey!important;
}