CSS - 가상 클래스(의사 클래스)

가상 클래스(의사 클래스)

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 적용됨

문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리, 콘텐츠의 상태, 마우스의 위치 등 외부 인자와 관련된 경우에도 스타일 적용 가능

- 가상 클래스 종류

• : link = 방문한 적이 없는 링크
• : visited = 방문한 적이 있는 링크
• : hover = 마우스를 롤오버 했을 때
• : active = 요소를 클릭했을 때
• : focus = 요소가 포커스 될 때 (입력 태그 등)
• : checked = 라디오 버튼이나 체크박스가 체크되었을 때
• : first = 첫 번째 요소
• : first-child = 부모 요소의 첫 번째 자식을 호출
• : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요소에만 적용)
• : first-letter = 블록 요소의 첫 번째 줄의 첫 번째 문자 선택
• : first-of-type = 형제 관계에 있는 요소 중 첫 번째 요소에 적용
• : last = 마지막 요소
• : last-child = 부모 요소의 마지막 자식 호출
• : last-of-type = 형제 관계에 있는 요소 중 마지막 요소에 적용
• : nth-child(2n+1) = 홀수 책임
• : empty = 내용이 비어있는 요소 선택
• : read-only = "readonly"인 요소 선택

- 가상 요소 종류

• :: before = 요소의 내용 앞에 추가시킬 태그를 지정 (content 속성과 함께 사용)
• :: after = 요소의 내용 뒤에 추가시킬 태그를 지정 (content 속성과 함께 사용)
• :: selection = 드래그하여 선택되는 영역을 지정