후손선택자와 자손선택자
- 각종정보모음/컴퓨터
- 2020. 3. 18.
후손선택자
body 태그 내부는 계층구조로 나타낼수 있는데 div 태그 기준으로 바로 한단계 아래에 위치한 h1태그 h2태그
ul 태그를 자손이라 하며 div 태그 아래에 위치한 모든 태그를 후손이라고함
| 형태 | 설명 |
| 선택자 A 선택자 B | 선택자 A의 후손인 선택자 B 선택 |
h1 태그를 선택하지만 후손 선택자를 사용해 특정한 대상의 후손이라는것을 구별함
#header 태그 아래에 위치한 h1 태그에는 빨간색을 적용하고, #section 태그 아래에 위치한 h1태그에는
주황색을 적용함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#header h1 {color:red;}
#section h1 {color:orange;}
</style>
</head>
<body>
<div id ="header">
<h1 class="title">Lorem ipsum dolor sit amet consectetur</h1>
</div>
<div id="nav">
<h1>Navigation</h1>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1></h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
</div>
</body>
</html>
1 선택자를 여러개를 활용하고 싶을 때가 있는데 header 태그의 후손인 h1 태그와 header 태그의 후손인
h2 태그를 선택하고 싶다면 아래 예시처럼 활용해야함
<style>
#header h1,#header h2 {color:red;}
</style>
자손선택자
| 형태 | 설명 |
| 선택자A>선택자B | 선택자A의 자손인 선택자B선택 |
앞에 후손선택자와 구성이 같지만 다만 #nav 태그 아래에 있는 h1태그는 후손이기 때문에
스타일이 적용되지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#header > h1 {color:red;}
#section > h1 {color:orange;}
</style>
</head>
<body>
<div id ="header">
<h1 class="title">Lorem ipsum dolor sit amet consectetur</h1>
</div>
<div id="nav">
<h1>Navigation</h1>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1></h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
</div>
</body>
</html>
'각종정보모음 > 컴퓨터' 카테고리의 다른 글
| CSS - 상태선택자 (16) | 2020.03.20 |
|---|---|
| CSS - 반응선택자 (7) | 2020.03.20 |
| CS Position 속성 활용팁 (margin과 absoulte 활용) (14) | 2020.03.18 |
| CSS - 속성 선택자 (13) | 2020.03.16 |
| CSS 기본선택자(전체선택자/태그선택자/아이디선택자/클래스선택자) (30) | 2020.03.15 |
| HTML5 시맨틱 태그 (4) | 2020.03.15 |