JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <p>First Paragraph
        <p class='border2'>SUB paragraph
            <p class='border3'>SUB SUB paragraph</p>
        </p>
    </p>
    <p>Second Paragraph</p>
    <p>Second Paragraph</p>
    <p>Second Paragraph</p>
</div>

CSS

.border3
{
    background: pink;
}
.border2
{
    background: green;
}
.border
{
    background: red;
}

JavaScript

// Does not work as expected
// $("div").find("p").andSelf().addClass("border");

// Does not work as expected
// $("div > p").addClass("border");

// Does not work as expected
// $("div p:first").nextAll().andSelf().addClass("border");

// Does not work AT ALL
//$("#test ~ p").addClass("border");