JSFiddle - React, Tailwind, and code Playground

by Sarah Giles

HTML

<div id="wrapper">
<div id="wrapper2">
<div id="wrapper3">
<div id="wrapper4">
<div id="wrapper5">
<div id="wrapper6">
<div id="wrapper7">
<div id="wrapper8">
<div id="wrapper9">
<div id="wrapper10">

<div id="subWrapper">
<div id="subWrapper2">
<div id="subWrapper3">
<div id="subWrapper4">
<div id="subWrapper5">
<div id="subWrapper6">

<div class="test-class10">
<div class="test-class9">
<div class="test-class8">
<div class="test-class7">
<div class="test-class6">
<div class="test-class5">
<div class="test-class4">
<div class="test-class3">
<div class="test-class2">
<div class="test-class1">
                                                     <h3 class="test-header">Test Style</h3>


                                                     <ul class="class-test">
  <li>List Item</li>
</ul>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

/*css specifity 6 */
div div div div ul li {
  color: red;
}

/*css specifity 11 */
.class-test li {
  color: blue;
}

/*css specifity 11 */
#wrapper h3{
  color: blue;
}
/*css specifity 110 */
.test-class10 .test-class9 .test-class8 .test-class7 .test-class6 .test-class5 .test-class4 .test-class3 .test-class2 .test-class1 .test-header{
  color: orange;
}