CSS 가상 선택자에는 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)가 포함됩니다. 모든 가상 선택자의 목록과 간단한 설명을 아래에 제공합니다.
가상 클래스 (Pseudo-classes)
동적 가상 클래스
- :hover: 마우스 커서가 요소 위에 있을 때
- :active: 요소가 활성화되었을 때 (보통 클릭된 상태)
- :focus: 요소가 포커스를 받을 때 (키보드나 마우스에 의해)
- :visited: 사용자가 방문한 링크
- :link: 방문하지 않은 링크
- :checked: 체크된 체크박스나 라디오 버튼
- :disabled: 비활성화된 요소
- :enabled: 활성화된 요소
- :focus-visible: 키보드 탐색에 의해 포커스된 요소
- :focus-within: 포커스를 포함한 하위 요소를 가진 요소
구조 가상 클래스
- :first-child: 부모 요소의 첫 번째 자식 요소
- :last-child: 부모 요소의 마지막 자식 요소
- :nth-child(n): 부모 요소의 n번째 자식 요소
- :nth-last-child(n): 부모 요소의 끝에서 n번째 자식 요소
- :nth-of-type(n): 형제 요소 중에서 n번째 해당 타입의 요소
- :nth-last-of-type(n): 형제 요소 중에서 끝에서 n번째 해당 타입의 요소
- :only-child: 부모 요소의 유일한 자식 요소
- :only-of-type: 부모 요소의 유일한 해당 타입의 자식 요소
- :empty: 자식 요소가 없는 요소
상태 가상 클래스
- :checked: 선택된 <input> 요소
- :default: 기본적으로 선택된 <input> 요소
- :disabled: 비활성화된 요소
- :enabled: 활성화된 요소
- :indeterminate: 상태가 결정되지 않은 <input> 요소
- :invalid: 유효하지 않은 입력 요소
- :valid: 유효한 입력 요소
- :in-range: 범위 내의 값이 있는 입력 요소
- :out-of-range: 범위 외의 값이 있는 입력 요소
- :optional: 선택적인 입력 요소
- :required: 필수 입력 요소
- :placeholder-shown: 입력 요소가 placeholder를 표시하는 경우
기타 가상 클래스
- :root: 문서의 루트 요소
- :target: URL의 fragment 식별자와 일치하는 요소
- :lang(language): 지정된 언어와 일치하는 요소
- :not(selector): 주어진 선택자와 일치하지 않는 요소
- :is(selector): 지정된 선택자와 일치하는 요소 (매칭 우선 순위가 낮음)
- :where(selector): 지정된 선택자와 일치하는 요소 (매칭 우선 순위가 0)
- :has(selector): 자식 요소에 지정된 선택자가 있는 요소
- :any-link: 방문 여부에 관계없이 모든 링크
- :read-only: 읽기 전용 요소
- :read-write: 쓰기 가능한 요소
- :fullscreen: 전체 화면 상태의 요소
가상 요소 (Pseudo-elements)
- ::before: 요소의 내용 앞에 삽입되는 가상 요소
- ::after: 요소의 내용 뒤에 삽입되는 가상 요소
- ::first-line: 요소의 첫 번째 줄
- ::first-letter: 요소의 첫 번째 글자
- ::selection: 사용자가 선택한 요소의 부분
- ::backdrop: 전체 화면 API에서 요소 뒤의 배경
- ::placeholder: 입력 요소의 placeholder 텍스트
- ::marker: 리스트 아이템의 마커
- ::cue: 웹VTT에서 텍스트 트랙 cue
- ::part(name): 커스텀 요소의 shadow DOM의 part
- ::slotted(selector): 슬롯된 요소
- ::spelling-error: 맞춤법 오류가 있는 텍스트
- ::grammar-error: 문법 오류가 있는 텍스트
728x90
