한양과학기술고등학교

에듀테크 프로젝트 대시보드

선택자 종류

CSS 예제 2 / 20

선택자를 조합할수록 더 정교하게 콕 집어 스타일을 줄 수 있습니다. 아래 목록의 CSS 규칙을 하나씩 지워보며 차이를 확인해보세요.

자손 선택자 > + [속성] :first-child
실시간 반영
결과 화면
💡 이렇게 바꿔보세요
  • .menu li (공백)와 .menu > li (부등호)의 차이를 꼭 구분하세요 — 공백은 '모든 후손', > 는 '직계 자식'만
  • li:first-child 는 '형제 중 첫 번째' — 무조건 li의 첫 번째 자식이라는 뜻이 아니에요
  • selectorA + selectorB 는 A 바로 다음에 오는 형제 B
← CSS 예제 목록