<div id="m1">
            <a href="#">내용1_1</a><span>내용1_2</span>
        </div>
        <div id="m2">
            <div>
                <a href="#">내용2_1</a><span>내용12_2</span>
            </div>
        </div>
        <div id="m3">
            <div><span>내용3_1</span></div>
        </div>
        <div id="m4">
            <span class="m">내용4_1</span><span>내용4_2</span><span>내용4_3</span><em>내용4_4</em>
        </div>
        <div id="m5">
            <span class="m">내용5_1</span><span>내용5_2</span><span>내용5_3</span>
        </div>
        <div id="m6">
            <div><span>내용6_1</span></div>
            <div>내용6_2</div>
        </div>
* {
         margin: 5px;
       }
$(document).ready(function () {
            $("#m1").children().css("border", "2px solid red");
            $("#m2").children().children("span").css("border", "2px solid orange");
            $("#m3 span").closest("div").css("border", "2px solid yellow");
            $("#m4 > span.m").nextUntil("em").css("border", "2px solid green");
            $("#m5 > span").filter(".m").css("border", "2px solid blue");
            $("#m6 > div").has("span").css("border", "2px solid navy");
        });

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