JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<p>The following is a demo for <a href="http://stackoverflow.com/a/10711731/106224">this Stack Overflow answer</a>.</p>
<section>
    <h1>Article</h1>
    <article class="foo">
        <p>.foo</p>
    </article>
</section>
<section>
    <h1>Article</h1>
    <article class="bar">
        <p>.bar</p>
    </article>
</section>
<section>
    <h1>Article</h1>
    <article class="baz">
        <p>.baz</p>
    </article>
</section>
<section class="foo">
    <h1>Article</h1>
    <article>
        <p>Classless article only</p>
    </article>
</section>
<section>
    <h1>Article</h1>
    <article class="test">
        <p>Classless section only</p>
    </article>
</section>
<section>
    <h1>Article</h1>
    <article>
        <p>Classless section and article. Text in this section should be red.</p>
    </article>
</section>

CSS

section {
    margin: 0.8em 0;
}

.other {
    color: red;
}

JavaScript

/* 
 * Select any section
 * that's neither a child of body with a class
 * nor a child of body having a descendant with a class.
 */
$('section:not(body > [class], body > :has([class]))').addClass('other');