구조 선택자 ★
부모 태그안에 동일한 태그의 자식들로 구성되어 있을 때 특정 자식요소를 선택하는 선택자.
[기본형]
- 선택자:first-child{ 속성 : 값 ;}
: 부모태그 안에 자식들 중에 첫번째에 위치한 태그를 선택함.
- 선택자:last-child{ 속성 : 값 ;}
: 부모태그 안에 자식들 중에 마지막에 위치한 태그를 선택함.
- 선택자:nth-child(숫자 | 숫자n){ 속성 : 값 ;}
: 부모태그 안에 자식들 중에 해당 숫자 번째에 위치한 태그를 선택함.
n은 수열을 뜻하며 2n번째의 2의 배수 번째에 있는 태그를 선택할 수 있다.
ex) 2n : n 수열. 2의배수 번째 2,4,6...
- 선택자:nth-last-child(숫자 | 숫자n){ 속성 : 값 ;}
: 부모태그 안에 자식들 중 뒤에서(=막내부터) 해당 숫자 번째에 위치한 태그를 선택함. 뒤에서 수열 번째에 있는 태그를 선택한다.
/* css */
/* ul안에 있는 li중 첫째 선택하기 */
ul li:first-child{
background-color: bisque;
}
/* css */
/* ul안에 있는 li중 막내 선택하기 */
ul li:last-child{
background-color: azure;
}
/* css */
/* ul안에 있는 li중 짝수 번째 li 선택하기 */
ul li:nth-child(2n){
color: lightpink;
font-weight: bold;
} 
/* css */
/* ul안에 있는 li중 홀수 번째 li 선택하기 */
ul li:nth-child(2n+1){
color: darkgoldenrod;
font-weight: bold;
} 
형태구조 선택자
부모박스안에 자식(형제) 태그들이 다르게 구성되어 있을 때 사용함.
[기본형]
- 선택자 : first-of-type
: 부모 박스안에 형제관계 중 첫번째로 위치하는 태그를 선택함.
- 선택자 : last-of-type
: 부모 박스안에 형제관계 중 마지막에 위치하는 태그를 선택함.
- 선택자 : nth-of-type(숫자 | 숫자n)
: 부모 박스안에 형제관계 중 숫자 또는 수열번째로 위치하는 태그를 선택함.
- 선택자 : nth-last-of-type(숫자 | 숫자n)
: 부모 박스안에 형제관계 중 뒤에서 숫자 또는 수열번째로 위치하는 태그를 선택함.
<!-- css -->
<style>
h1:first-of-type{
color:brown;
}
h1:last-of-type{
color: sandybrown;
}
h3:first-of-type{
color: blueviolet;
}
p:nth-of-type(2){
color: aqua;
}
</style>
</head>
<body>
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h3>제목3</h3>
<h2>제목2</h2>
<h1>제목1</h1>
</div>
<div>
<h1>제목1</h1>
<p>내용1</p>
<h2>제목2</h2>
<p>내용2</p>
<p>내용3</p>
<h5>제목5</h5>
</div>
</body> 
