<body>
    <div id="m1">
        <span>내용1_1</span>
        <span>내용1_2</span>
        <span>내용1_3</span>
    </div>
    <div id="m2">
        <strong>내용2_1</strong>
        <span>내용2_2</span>
        <strong>내용2_3</strong>
        <span>내용2_4</span>
    </div>
    <div id="m3">
        <span>내용3_1</span>
        <span>내용3_2</span>
        <span>내용3_3</span>
    </div>
    <div id="m4">
        <strong>내용4_1</strong>
        <span>내용4_2</span>
        <strong>내용4_3</strong>
        <span>내용4_4</span>
        <strong>내용4_5</strong>
        <span>내용4_6</span>
    </div>
    <div id="m5">
        <span>내용5_1</span>
    </div>
    <div id="m6">
        <strong>내용6_1</strong>
        <span>내용6_2</span>
    </div>
</body>
span {
    margin: 5px;
    display: inline-block;
}
        $(document).ready(function () {
            $("#m1 > span:first-child").css("border", "2px solid red");
            $("#m1 > span:last-child").css("border", "2px solid red");
            $("#m2 > span:first-of-type").css("border", "2px solid orange");
            $("#m2 > span:last-of-type").css("border", "2px solid orange");
            $("#m3 > span:nth-child(1)").css("border", "2px solid yellow");
            $("#m3 > span:nth-last-child(1)").css("border", "2px solid yellow");
            $("#m4 > span:nth-of-type(1)").css("border", "2px solid green");
            $("#m4 > span:nth-last-of-type(1)").css("border", "2px solid green");
            $("#m5 > span:only-child").css("border", "2px solid blue");
            $("#m6 > span:only-of-type").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