<ul class="list1">
        <li class="list_1">내용1_1</li>
        <li class="list_2">내용1_2</li>
        <li class="list_3">내용1_3</li>
    </ul>
    <ul class="list2">
        <li class="list_bg">내용2_1</li>
        <li class="list_1">내용2_2</li>
        <li class="list_2">내용2_3</li>
    </ul>
    <ul class="list3">
        <li class="list">내용3_1</li>
        <li class="list-1">내용3_2</li>
        <li class="list-bg">내용3_3</li>
    </ul>
    <ul class="list4">
        <li class="list">내용4_1</li>
        <li class="list_1">내용4_2</li>
        <li class="list_bg">내용431</li>
    </ul>
  li {
            margin: 5px;
        }
 $(document).ready(function(){
            $(".list1 > li[class='list_1']").css("border","2px solid red");
            $(".list1 > li[class!='list_1']").css("border","2px solid orange");
            $(".list2 > li[class~='list']").css("background","yellow");
            $(".list2 > li[class*='list']").css("border","2px solid green");
            $(".list3 > li[class|='list']").css("border","2px solid blue");
            $(".list4 > li[class^='list']").css("border","2px solid navy");
            $(".list4 > li[class$='bg']").css("background","purple");
         })

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