HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/child.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class="container">
<h1>자식선택자</h1>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
</body>
</html>
JS
/**
*
*/
$(document).ready(function(){
//얘는 무조건 들어감 제이쿼리의 기본문법
//메모리 등재역할
//자식선택자(선택자>선택자)
$(".container>h1").css("color","red") //css에서 하고싶으면 css따로 만들어서 하면 됨 둘다 가능
//css에서는
//.container>h1{color:red;} //문법차이
//후손선택자(선택자 선택자) 한칸 띄움
$(".container ul").css("color","blue")
//css에서는
//.container h1{color:blue;} //문법차이
})
결과
