| 일반 구조 선택자 | |
| :first-child | 형제 관계 중에서 첫 번째에 위치하는 태그 선택 |
| :last-child | 형제 관계 중에서 마지막에 위치하는 태그 선택 |
| :nth-child(수열) | 형제 관계 중에서 앞에서 (수열)번째에 위치하는 태그 선택 |
| :nth-last-child(수열) | 형제 관계 중에서 첫 번째에 위치하는 태그 선택 |
| (수열) : 2n + 1 :nth-child(2n+1) -> n에다가 0부터 숫자를 차근차근 넣는다 그럼 첫 번재, 세 번째, 다섯 번째 등에 위치하는 태그를 선택한다. <style> li: first-child { border-radius: 10px 0 0 10px; } li: last-child { border-radius: 0 10px 10px 0; } 이것은 리스트중에 첫번째와 마지막 부분에 해당하는 태그만 스타일을 입힌다. li:nth-child(2n) { background-color: black; } li: nth-child(2n+1) { background-color: red; } </style> 이것은 첫번째 짝수는 블랙 홀수는 레드 스타일을 입힌다. <body> <ul> <li>First</li> <li>Second></li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> |
|
| 형태 구조 선택자 | |
| :first-of-type | 형제 관계 중에서 첫 번째에 특정 태그 선택 |
| :last-of-type | 형제 관계 중에서 마지막에 특정 태그 선택 |
| :nth-of-type(수열) | 형제 관계 중에서 앞에서 (수열)번째에 특정 태그 선택 |
| :nth-last-of-type(수열) | 형제 관계 중에서 첫 번째에 특정 태그 선택 |
| <style> h1: first-of-type { color: red; } h2: first-of-type { color: red; } h3: first-of-type { color: red; } </style> <body> <ul> <h1>red</h1> <h2>red></h2> <h3>red</h3> <h3>black</h3> <h2>black</h2> <h1>black</h1> </ul> (red, black는 결과값의 글씨 색깔을 의미) |
|