<body>
    <div id="m1">
        <p>html, css, javascript</p>
        <p>html 5와 웹표준</p>
        <p></p>
    </div>
    <div id="m2">
        <span></span>
        <span>내용1</span>
    </div>
    <div id="m3">
        <section>
            <article>내용2_1</article>
        </section>
        <section>
            <div>
                <article>내용2_2</article>
            </div>
        </section>
    </div>
</body>
* {
    margin: 5px;
}

#m1 > p:last-child {
    height: 20px;
}

span {
    display: inline-block;
    height: 20px;
}
        $(document).ready(function () {
            $("#m1 > p:contains('html')").css("border", "4px solid red");
            $("#m1 > p:empty").css("border", "4px solid orange");
            $("#m2 > span:parent").css("border", "4px solid yellow");
            $("#m3 > section:has(article)").css("border", "4px solid green");
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js