JSFiddle - React, Tailwind, and code Playground

by neilsarkar

HTML

<p>Not nested</p>
<div>
    <p>Nested once</p>
    <p class="cool">Nested once with class name</p>
    <p class="cool nice">Nested with two classes</p>
    <div>
        <p>Double nested</p>
    </div>
    <div class="sweet">
        <p>Double nested with parent class</p>
        <p class="important">Important</p>
    </div>
</div>

CSS

/*  this is beaten by pink because the selectors tie and pink is lower in the css */
p { color: black; }

/* this beats magenta because of the !important tag */
p.important { color: turquoise !important; }

/* this beats blue because it's tied on nesting and wins on the element */
div div.sweet p { color: magenta; } 

/* this beats purple because it's nested twice */
div div p { color: blue; } 

/* this beats green because it's even more specific about the element */
p.cool.nice { color: purple; }

/* this beats orange because it's more specific about the element */
p.cool { color: green; }

/* this beats pink because it's more nested */
div p { color: orange; }

/* this beats black because it's lower in the stylesheet */
p { color: pink; }