<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">내용4_3</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