후손 선택자와 자식 선택자

기타 정보/ETC

Wings of Freedom 2020. 7. 14. 17:21

후손 선택자와 자식 선택자

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

</style>

</head>

<body>

<div>

<h1>CSS3 Selector Basic</h1>

<h2>Lorem ipsum</h2>

<ul>

<li>universal selector</li>

<li>type selector</li>

<li>id & class selector</li>

</ul>

</div>

</body>

</html>

이때 div 태그를 기준으로 바로 한 단계 아래에 위치한 태그를 자식(h1, h2, ul)이라고 부르고,

div 태그 아래에 위치한 모든 태그를 후손(h1, h2, ul, li)이라고 한다.

--> 후손이 자식보다 포괄적이다.

1. 후손 선택자

후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다.

(1) 선택자 형태

선택자A 선택자B

ex.) #header h1, h2 { color: red; }

#header h1, #header h2 { color: red; }

(2) 설명

선택자A의 후손에 위치하는 선택자B를 선택한다.

--> 후손 선택자를 사용해 h1 태그를 선택하지만 특정한 대상의 후손을 선택할 수 있다.

2. 자식 선택자

자식 선택자는 특정한 태그 아래에 있는 자식을 선택할 때 사용하는 선택자이다.

(1) 선택자 형태

선택자A > 선택자B

ex.) #header > h1 { color: red; }

(2) 설명

선택자A의 자식에 위치하는 선택자B를 선택한다.