JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div class="container">
        <p data-specificity=2>
            This should inherit
        </p>
        
        <p data-specificity=1>
            This should not
        </p>
    </div>
    <p data-specificity=2>
        Neither should this, because it doesn't have what to inherit
    </p>
</body>
</html>

CSS

p[data-specificity="1"]{
        color:red;
        font-family:verdana;
        text-decoration:underline;
    }
    p[data-specificity="2"]{
        color:black;
        font-family:arial;
    }
    div.container > *[data-specificity="2"] {
        font-family:impact;
        color:blue;
        text-decoration:underline;
    }