CSS : 의사 클래스 (pseudo-class), 자식 선택자

• 의사 클래스 (pseudo-class)

※ 정의
- HTML 요소의 특정 상태에 따라 스타일을 동적으로 적용하기 위한 선택자이다.

※ 동적 의사 클래스

:hover	마우스가 요소 위에 올라갔을 때의 상태를 정의
:focus	입력 요소가 포커스를 받았을 때의 상태를 정의
:active	요소가 활성화되었을 때의 상태를 정의
:link	방문하지 않은 링크의 기본 스타일을 정의
:visited	이미 방문한 링크의 스타일을 정의

※ 상태 의사 클래스

:checked	주로 라디오 버튼이나 체크 박스와 같은 입력 요소의 체크 상태를 나타내기 위해 사용
:enabled	활성화된 상태의 입력 요소를 선택하는 데에 사용
:disabled	비활성화된 상태의 입력 요소를 선택하는 데에 사용

※ 구조 의사 클래스

:first-child	해당 요소의 부모 요소의 자식 중에서 첫 번째 자식을 선택
:nth-child	해당 요소의 부모 요소의 자식 중에서 특정 순서에 해당하는 자식을 선택
:first-of-type	해당 요소와 같은 유형의 형제 중에서 첫 번째 요소를 선택
:nth-of-type	해당 요소와 같은 유형의 형제 중에서 특정 순서에 해당하는 요소를 선택

※ 기타 의사 클래스

:not	괄호 안에 지정된 선택자와 일치하지 않는 요소를 선택
:lang	특정 언어로 작성된 요소를 선택

 

• 자식 선택자

※ 정의
- 부모 요소의 내부 자식 요소를 선택하는데 사용된다.

※ 자식 선택자 종류

div > span	div 안에 있는 직접적인 자식 요소 중 span 요소에만 적용
div span	div 안에 있는 모든 span 요소에 적용