<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");
})
This Pen doesn't use any external CSS resources.