<!-- 01_selector/01-09_구조_선택자.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-09_구조_선택자</title>
<!--
# 일반 구조 선택자
- 특정한 위치에 있는 태그를 선택합니다
- :first-child -> 형제 관계 중에서 첫번째 요소를 선택
:last-child -> 형제 관계 중에서 마지막 요소를 선택
:nth-child(n) -> 형제 관계 중에서 앞에서 n번째 요소를 선택
:nth-last-child(n) -> 형제 관계 중에서 뒤에서 n번째 요소를 선택
# 형태 구조 선택자
- 일반 구조 선택자와 비슷하지만 태그 형태를 구분합니다
- :first-of-type -> 형제 관계 중에서 첫번째로 나오는 특정 태그를 선택
:last-of-type -> 형제 관계 중에서 마지막으로 나오는 특정 태그를 선택
:nth-of-type(n) -> 형제 관계 중에서 앞에서 n번째로 나오는 특정 태그를 선택
:nth-last-of-type(n) -> 형제 관계 중에서 뒤에서 n번째로 나오는 특정 태그를 선택
-->
<style type="text/css">
ul > li {
font-weight: bold;
font-size: 30px;
}
ul > li:nth-child(2n) {
color: green;
}
ul > li:nth-child(2n+1) {
color: brown;
}
ul > li:first-child {
color: blue;
}
ul > li:last-child {
color: red;
}
p:first-of-type {
color: orange;
}
p:last-of-type {
color: purple;
}
p:nth-of-type(2){
background-color: pink;
}
</style>
</head>
<body>
<h1>일반 구조 선택자</h1>
<br/>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </li>
<li> six </li>
<li> seven </li>
</ul>
<br/>
<h1>형제 구조 선택자</h1>
<br/>
<p>h1 - p1</p>
<p>h1 - p2</p>
<p>h1 - p3</p>
<p>h1 - p4</p>
<br/>
<div>
<h2>제목 - h2</h2>
<p>h2 - p1</p>
<p>h2 - p2</p>
<p>h2 - p3</p>
<p>h2 - p4</p>
</div>
</body>
</html>