JunO3O
후손 선택자 / 자손 선택자
후손 선택자 / 자손 선택자
2023. 3. 21. 03:03ㆍCSS
후손 선택자 ? 자손 선택자 ?
# 부모 / 자손 / 후손 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 자손 ? 후손 ?</title>
</head>
<body>
<div>
<h1> css 선택자 </h1>
<h2> 기본 선택자 </h2>
<ul>
<li> 전체 선택자 </li>
<li> 태그 선택자 </li>
<li> 아이디 선택자와 클래스 선택자 </li>
</ul>
</div>
</body>
</html>
ㄴ> div 태그를 기준으로 div 태그는 부모 선택자가 되고, h1 태그와 h2 태그 그리고 ul 태그를 자손 선택자라고 하며, div 태그 아래에 위치한 모든 태그(자손 선택자 포함)를 후손 선택자라고 합니다.
# 자손 선택자
ㅁ 자손 선택자는 특정한 태그의 자손을 선택할 때 사용합니다.
| 형태 | 설명 |
| 선택자 a > 선택자 b | 선택자 a의 자손인 선택자 b 선택 |
ㅁ 부모 바로 아래 있는 태그에 대해서 스타일을 적용합니다. 자손과 후손을 구별할 줄 알아야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 자손 선택자 </title>
<style>
#header > h1 {
color : blue;
}
#section > h1 {
color : green;
}
</style>
</head>
<body>
<div id="header">
<h1 class="title"> 여기보세요~ </h1>
<div id="nav">
<h1> 네비게이션 </h1>
</div>
</div>
<div id="section">
<h1 class="title"> 타이틀입니다. </h1>
<p> 문단 안에 작성한 글입니다. </p>
</div>
</body>
</html>
# 후손 선택자
ㅁ 후손 선택자는 특정한 태그의 후손을 선택할 때 사용합니다.
| 형태 | 설명 |
| 선택자 a , 선택자 b | 선택자 a 의 후손인 선택자 b 선택 |
ㅁ h1 태그를 선택하지만, 후손 선택자를 사용해 특정한 대상의 후손이라는 것을 구별할 수 있습니다.
ㅁ #header 태그 아래에 위치한 h1 태그에는 blue를 적용하고, #section 태그 아래에 위치한 h1 태그에는 green을 적용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 후손 선택자 </title>
<style>
#header h1 {
color : blue;
}
#section h1 {
color : green;
}
</style>
</head>
<body>
<div id="header">
<h1 class="title"> 안녕하세요 </h1>
<div id="nav">
<h1> 네비게이션 </h1>
</div>
</div>
<div id="section">
<h1 class="title"> 반갑습니다 </h1>
<p> 후손선택자를 공부중입니다. </p>
</div>
</body>
</html>
