후손 선택자와 자식 선택자
<!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를 선택한다.
'Comparison' 카테고리의 다른 글
| [Comparison] CHAR와 VARCHAR (VARCHAR2) (0) | 2015.01.04 |
|---|---|
| [Comparison] 추상메서드와 인터페이스 (0) | 2014.12.23 |
| [Comporison] 언어환경별 문자열 추출 (0) | 2014.12.20 |
| [Comporison] Dispatcher방식과 Redirect 방식 (0) | 2014.12.20 |
| [Comparison] include 지시어와 include 액션원소 (0) | 2014.12.20 |