<div id="m1">
        <p>html, css, javascript</p>
        <p>html5와 웹표준</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>
 * {
            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