JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div class="exp-pdp-size-dropdown-container selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown-menu" style="display: block; top: 38px; left: 0px;">
<a class="selectBox exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown selectBox-menuShowing" style="display: inline-block;" title="" tabindex="0"><label class="exp-pdp-dropdown-label platform-font-1">SIZE</label><span class="selectBox-label">&nbsp;</span><span class="selectBox-arrow glyph-replace" data-glyph="j"></span></a>

    <ul class="selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style="">
        <li class="exp-pdp-size-not-in-stock selectBox-selected" style=""><a rel=""></a>
        </li>
        <li class="exp-pdp-size-not-in-stock first-in-row upper-left"><a rel="3488377:6">
           6
        </a>
        </li>
        <li class="exp-pdp-size-not-in-stock"><a rel="3488378:6.5">
           6.5
        </a>
        </li>
        <li class="last-in-row upper-right"><a rel="3488379:7">
           7
        </a>
        </li>
        <li class="first-in-row"><a rel="3488380:7.5">
           7.5
        </a>
        </li>
        <li class=""><a rel="3488381:8">
           8
        </a>
        </li>
        <li class="last-in-row"><a rel="3488382:8.5">
           8.5
        </a>
        </li>
        <li class="first-in-row"><a rel="3488383:9">
           9
        </a>
        </li>
        <li class="exp-pdp-size-not-in-stock"><a rel="3488384:9.5">
           9.5
        </a>
        </li>
        <li class="last-in-row"><a rel="3488385:10">
           10
        </a>
        </li>
        <li class="first-in-row"><a rel="3488386:10.5">
           10.5
        </a>
        </li>
        <li class=""><a rel="3488387:11">
           11
        </a>
        </li>
        <li class="last-in-row"><a rel="3488388:11.5">
           11.5
        </a>
        </li>
        <li class="first-in-row"><a rel="3488389:12">
           12
        </a>
        </li>
        <li...

JavaScript

$("ul.selectBox-options li:contains('8.5')").css('background', 'purple');
$('ul.selectBox-options li').first().css('background', 'yellow');
$('ul.selectBox-options li').last().css('background', 'orange');
$('ul.selectBox-options li:nth-child(2)').css('background','red');
$('ul.selectBox-options li:nth-child(3)').css('background','blue');