CSS 선택자 및 의사 클래스 정리

CSS 선택자

인접 형제 선택자 (+)

요소 + 형제요소 { 속성: 속성값; }

같은 계층에서 요소 바로 다음에 위치하는 형제요소 하나에만 CSS를 적용합니다.

일반 형제 선택자 (~)

요소 ~ 형제요소 { 속성: 속성값; }

같은 계층에서 요소 다음에 위치하는 모든 형제요소에 CSS를 적용합니다.

---

CSS 의사 클래스

동적 의사 클래스

요소:link { 속성: 속성값; } // href 속성의 요소 중 아직 방문하지 않은 요소에 CSS 적용
요소:visitied { 속성: 속성값; } // 이미 방문한 링크 요소에 CSS 적용
요소:hover { 속성: 속성값; } // 마우스 커서가 올라간 요소에 CSS 적용
요소:active { 속성: 속성값; } // 마우스 클릭되어 활성화된 요소에 CSS 적용
요소:focus { 속성: 속성값; } // 클릭, 입력 등 포커스를 받은 요소에 CSS 적용

상태 의사 클래스

요소:checked { 속성: 속성값; } // 선택, 체크한 상태의 요소에 CSS 적용
요소:enabled { 속성: 속성값; } // 클릭, 입력 등 포커스를 받을 수 있는 활성 요소에 CSS 적용
요소:disabled { 속성: 속성값; } // 포커스를 받을 수 없는 비활성 요소에 CSS 적용

구조 의사 클래스

요소:first-child { 속성: 속성값; } // 첫번째 요소에 CSS 적용
요소:nth-child(n) { 속성: 속성값; } // n번째 요소에 CSS 적용
요소:last-child { 속성: 속성값; } // 마지막 요소에 CSS 적용