<html lang="ko">
<head>
<meta charset="UTF-8">
<title>탐색 선택자</title>
<style>
* {
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="m1">
<a href="#">내용1_1</a><span>내용1_2</span>
</div>
<div id="m2">
<div>
<a href="#">내용2_1</a><span>내용2_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>
</body>
</html> $(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.