JSFiddle - React, Tailwind, and code Playground

by Niranjan Borawake

HTML

<ul id="colorList" class="colors">
    <li id="item1" class="item">
        <div id="color1" class="color" style="background-color:red;">#1</div>
    </li>
    <li id="item2" class="item">
        <div id="color2" class="color">#2</div>
    </li>
    <li id="item3" class="item">
        <div id="color3" class="color" title="#item1 .color">#3</div>
    </li>
    <li id="item4" class="item">
        <div id="color4" class="color">#4</div>
    </li>
    <li id="item5" class="item">
        <div id="color5" class="color">#5</div>
    </li>
    <li id="item6" class="item">
        <div id="color6" class="color">#6</div>
    </li>
    <li id="item7">
        <div id="color7" class="color">#7</div>
    </li>
    <li id="item8">
        <div id="color8">#8</div>
    </li>
</ul>

CSS

/*     Specificity formula: style|id|class|tag        */

/* For div with id = c1, style attribute is present so,
   Specificity : 1|0|0|0 = 1000
   hence, it's colored RED.
*/
 #item2 div.color {
    /*  Specificity : 0|1|1|1 = 0111                       */
    background-color:violet;
}
#item1 .color, #item2 .color, #item3 .color {
    /*  Specificity : 0|1|1|0 = 0110                       */
    background-color:blue;
}
#item4 div {
    /*   Specificity : 0|1|0|1 = 0101                      */
    background-color:teal;
}
#color1, #color2, #color3, #color4, #color5 {
    /*   Specificity : 0|1|0|0 = 0100                      */
    background-color:green;
}
.item div {
    /*   Specificity : 0|0|1|1 = 0011                       */
    background-color : orange;
}
.color {
    /*  Specificity : 0|0|1|0 = 0010                        */
    background-color : gray;
}
div {
    /*  Specificity : 0|0|0|1 = 0001                        */
    background-color : black;
}
div {
    width: 300px;
    height: 50px;
    border : 2px solid black;
    color : white;
}
li{
    list-style: none;
}