후손 선택자와 자식 선택자
후손 선택자와 자식 선택자
<!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를 선택한다.
출처: https://devbox.tistory.com/entry/Comparison-후손-선택자와-자손-선택자?category=577782 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'기타 정보 > ETC' 카테고리의 다른 글
| 국토교통부 공공데이터 부동산 실거래가 API 신청 방법 (0) | 2021.03.28 |
|---|---|
| Browser에서 Google.com을 검색하면 무슨 일이 발생하나요? (0) | 2021.03.17 |
| CHAR와 VARCHAR (VARCHAR2) (0) | 2020.07.14 |
| 추상메서드와 인터페이스 (0) | 2020.07.14 |
| 언어환경별 문자열 추출 (0) | 2020.07.14 |
| Dispatcher방식과 Redirect 방식 (0) | 2020.07.14 |
| include 지시어와 include 액션원소 (0) | 2020.07.14 |
| LEFT JOIN 과 RIGHT JOIN (0) | 2020.07.14 |