JSFiddle - React, Tailwind, and code Playground

HTML

Troy's specificity demo...
<div id="a1">
    <div id="a1">
        <div id="a1">
            <div id="a1">
                <div id="a1">
                    <div id="a1">
                        <div id="a2">
                            <div id="a3">
                                <div id="a4">
                                    <div id="a5">
                                        <div id="a6">
                                            <div id="a7">
                                                <div id="a8">
                                                    <div id="a9">
                                                        <div id="dad" >
                                                            <div id="a11" class="red orange" data-attr="blah"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div {
    min-height: 20px;
    width:20px;
    padding: 5px;
    border-style: dotted;
    border-width: 1px;
}
div div div div div div {
    background-color: blue;
}

 div div div div div div div div>div>div>div  {
    background-color: green;
}

 div div div div div div div div div div div div div div {
    background-color: yellow;
}


.orange[data-attr="blah"] {
    background-color:orange;
}

.red[data-attr] {
    background-color:red;
}

#dad div {
        background-color:purple;
}

#a11 {
        background-color:black;
}