<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<div>
<h1 id="first">인접 선택자</h1>
<h1 class="one">children 선택자</h1>
<h1 class="one">next선택자</h1>
<h4>prev 선택자</h4>
<h4>parent 선택자</h4>
<h3><b>sibling 선택자</b></h3>
<h2>후손, 자손 선택자</h2>
</div>
<script>
$(function(){
$('div').children().css('color', 'red');
$('div').children('.one').css('background-color', 'lightblue')
$('h4').next().css('border', '1px solid hotpink')
$('.one').prev().css('background', 'yellow')
$('b').parent().css('font-size', '3em');
$('h4').siblings().css('color', 'blue');
})
</script>
</body>
</html>
결과물