- 선택된 요소뒤에 :나 ::를 붙여서, 특별한 상태 혹은 특정 부분을 선택할 수 있는 셀렉터
- 가상 클래스와 가상 엘리먼트가 있음
1) 가상 클래스(pseudo class)
- 선택된 요소의 특정 상태에 동작하는 셀렉터
:virtual selector와 같이 사용
- 구조 의사 클래스도 포함
셀렉터 | 사용 예 | 동작 설명 |
:active | a:active | 링크를 마우스로 클릭 했을때 |
:hover | a:hover | 마우스가 해당 요소의 위로 올라간 경우 |
:link | a:link | 방문하지 않은 모든 링크를 선택 |
:focus | input:focus | <input> 태그에서 해당 요소가 마우스 포커스를 가진경우(선택된 경우) |
:checked | input:checked | <input> 태그에서 체크박스가 체크 되었을때 |
:disabled | input:disabled | <input> 태그의 상태가 disabled 인 경우, disabled 속성 적용시 |
:enabled | input:enabled | <input> 태그의 상태가 enabled 인 경우 |
:root | ㅤ | 문서 트리의 루트 요소 선택 |
:first-child | p:first-child | 해당 요소의 첫번째 자식 요소를 선택 |
:last-child | p:last-child | 해당 요소의 마지막 자식 요소를 손택 |
:nth-child(n) | p:nth-child(2) | 해당 요소의 n번째 자식 요소를 선택 |
2) 가상 엘리먼트(pseudo element)
- 선택된 요소의 특정 위치에 동작하는 셀렉터
::pseudo element와 같이 사용
- content가 있어야 동작
- 남용하는 것은 좋지 않음. 할 수 있다면 html로 쓰면 좋다고 함
셀렉터 | 사용 예 | 동작 설명 |
::after | p::after | 선택한 요소의 맨 마지막 자식으로 의사 요소 생성 |
::before | p::before | 선택한 요소의 첫 자식으로 의사 요소 생성 |
::first-letter | p::first-letter | 선택된 요소의 텍스트 내용중 첫번째 글자 |
::first-line | p::first-line | 선택된 요소의 텍스트 내용중 첫번째 줄 |
::selection | p::selection | 선택된 요소에서 텍스트가 선택(마우스로 더블클릭 or 드래그)된 영역 |