<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/selector4.css"
<title>04_CSS선택자4</title>
</head>
<body>
<h2>일반 구조 선택자</h2>
<pre>
형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
(중요) 위치를 기준으로 구분함
:first-child
:last-child
:nth-child(수열)
:nth-last-child(수열)
</pre>
<div id="test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>형태 구조 선택자</h2>
<pre>
선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자.
(선택된 요소들을 기준으로 구분)
:first-of-type - 같이 선택된 형제들 중에서 첫 번째 요소
:last-of-type - 같이 선택된 형제들 중에서 마지막 요소
:nth-of-type(수열) - 같이 선택된 형제들 중에서 수열 번째 모든 요소
:nth-last-of-type(수열) - 같이 선택된 형제들 중에서 뒤에서 수열번째 모든 요소
</pre>
<div id="test2">
<pre>테스트 0</pre>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트 6</pre>
</div>
<hr>
<h2>부정 선택자( 선택자1:not(선택자2) )</h2>
<pre>
골화 내 선택자를 제외한 나머지 요소를 선택
</pre>
<ul id="test3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
ha lee :)