[jQuery] CSS 선택자 (자식 선택자">", 하위 선택자" ")
2021. 8. 7. 01:44
728x90
01 자식 선택자 (" > ")
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>자식 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='/resource/lib/jquery-3.6.0.min.js'></script>
<script>
$(function(){
//자식 선택자 - 배경색 노랑, 텍스트 밑줄
$("#wrap > h1").css({ "background-color":"yellow",
"text-decoration":"underline"});
});
</script>
</head>
<body>
<div id="wrap">
<h1>자식 요소 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>
02 하위 선택자 (" ")
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>자식 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='/resource/lib/jquery-3.6.0.min.js'></script>
<script>
$(function(){
//하위 선택자
$("#wrap p").css({"color":"green"});
});
</script>
</head>
<body>
<div id="wrap">
<h1>자식 요소 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>728x90
'jQuery > Study' 카테고리의 다른 글
| [jQuery] 자손 요소의 탐색 (.children, .find) (0) | 2021.08.07 |
|---|---|
| [jQuery] 조상 요소의 탐색 (.parent, .parents, .parentsUntil, .closest) (0) | 2021.08.07 |
| [jQuery] 형제 요소의 탐색 (.next, .prev, .nextAll, .prevAll, .nextUntil, .prevUntil, .siblings) (0) | 2021.08.07 |
| [jQuery] CSS 선택자 (태그 선택자, ID 선택자, class 선택자) (0) | 2021.08.07 |
| [jQuery] 제이쿼리 적용 (파일 다운로드, CDN) (0) | 2021.08.06 |
