계층 선택자
자식, 자손 선택자
| 종류 | 예시 | 풀이 |
| 자식 선택자 (자식 포함, 손주 미포함) |
div > p | div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택 |
| 자손 선택자 (자식, 손주 포함) |
div p | div 태그의 모든 자식 중 p태그를 모두 선택 |
| 인접 형제 선택자 (바로 아래 동생) |
div + p | div 태그의 인접한 형제 중 첫 번째 p태그 선택 |
| 형제 선택자 (동생들) |
div ~ p | div 태그의 인접한 형제 p태그를 모두 선택 |
:first-child, :last-child, :nth-child()
| 종류 | 풀이 |
| :first-child | 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 첫번째 |
| :last-child | 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 마지막 |
| :nth-child(n) | 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 n번째 |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
nth-child() 활용
p:nth-child(n): p태그 형제 요소 중 n번째의 p만 선택
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.