<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0308 인접선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// $(document).ready(function(){
// //실행부
// });
$(function(){
//실행부
//인접선택자
// $('*') -> 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, $('div h1') -> 후손 선택자, $('div>h1') -> 자손 선택자
//children() : 자손을 선택
$('div').children('.one').css('color', 'green').css('background-color', 'orange');
//next() : 선택자의 다음 객체 선택
$("#first").next().css('text-decoration','underline');
//prev() : 선택자의 이전 객체 선택
$("img").prev().css('border','3px solid gray');
//parent() : 선택자의 부모 객체 선택
$('#first').parent().css('background-color','pink');
//siblings() : 선택자의 형제 객체 선택
$('#first').siblings().css('border','2px dotted red');
$('#first').parent().next().prev().children('#first').css('border', '2px solid blue');
});
</script>
</head>
<body>
<div>
<h1 id="first">인접선택자 1</h1>
<h1 class="one">인접선택자 2</h1>
<h2 class="one">인접선택자 3</h2>
<h4>인접선택자 4</h4>
<h4>인접선택자 5</h4>
<h3>인접선택자 6</h3>
<h2>인접선택자 7</h2>
</div>
<img src="../img/icon03.png">
</body>
</html>
