JSFiddle - React, Tailwind, and code Playground

by chanonroy

HTML

<div id="zero">
  <div>
    <i> Player Image </i>
    <h3> Player Title </h3>
    <h4> Player Data </h4>
  </div>
  
   <div>
    <i> Twitch Image </i>
    <h3> Twitch Title </h3>
    <h4> Twitch Data </h4>
  </div>
  
   <div>
    <i> YouTube Image </i>
    <h3> YouTube Title </h3>
    <h4> YouTube Data </h4>
  </div>
  
   <div>
    <i> Twitter Image </i>
    <h3> Twitter Title </h3>
    <h4> Twitter Data </h4>
  </div>
</div>

<div id="first">
  <div>
    <i> block one </i>
    <div> data </div>
    <div> not this <span class="value"> percent </span> </div>
  </div> <br>
  
  <div>
    <i> block two </i>
    <div> data </div>
    <div> percent </div>
  </div> <br>
  
  <div>
    <i> block three </i>
    <div> data </div>
    <div> percent </div>
  </div> <br>
  
  <div>
    <i> block four </i>
    <div> data </div>
    <div> percent </div>
  </div> <br>
  
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

JavaScript

$('#first').children().children().eq(1).css('color', 'red');
$('#first').children().children().eq(2).find('span').css('color', 'blue');

$('#first').children().children().eq(4).css('color', 'red');
$('#first').children().children().eq(5).css('color', 'blue');

$('#first').children().children().eq(7).css('color', 'red');
$('#first').children().children().eq(8).css('color', 'blue');

$('#first').children().children().eq(10).css('color', 'red');
$('#first').children().children().eq(11).css('color', 'blue');

<!-- $("#zero").children().children().eq(9).css('color', 'blue'); -->

$("#zero").find('i').css('color', 'blue');