CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용
문법
선택자:의사클래스이름 {속성: 속성값;}
선택자.클래스이름:의사클래스이름 {속성: 속성값;}
선택자#아이디이름:의사클래스이름 {속성: 속성값;}
1. 동적 의사 클래스(dynamic pseudo-classes)
:link : 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택 (기본 상태)
:visited : 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택
:hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택
:active : 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택
:focus : 초점이 맞춰진 input 요소를 모두 선택
2. 상태 의사 클래스(UI element states pseudo-classes)
:checked : 체크된(checked) 상태의 input 요소를 모두 선택
:enabled : 사용할 수 있는 input 요소를 모두 선택
:disabled : 사용할 수 없는 input 요소를 모두 선택
3. 구조 의사 클래스(structural pseudo-classes)
:first-child : 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택
:last-child : 모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택.
:nth-child : 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
:nth-last-child : 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택.
:first-of-type : 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택
:last-of-type : 모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택
:nth-of-type : 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택
:nth-last-of-type : 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택
:only-child : 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택
:only-of-type : 자식(child) 요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택
:empty : 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택
:root : 문서의 root 요소를 선택
4. 기타 의사 클래스
:not(선택자) : 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용
:lang(언어) : 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용
:target : 현재 활성화된 target 요소를 모두 선택
:in-range : 특정 범위 내의 값을 가지는 input 요소를 모두 선택
:out-of-range : 특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택
:read-only : readonly 속성을 가지는 input 요소를 모두 선택
:read-write : readonly 속성을 가지지 않는 input 요소를 모두 선택
:required : required 속성을 가지는 input 요소를 모두 선택
:optional : required 속성을 가지지 않는 input 요소를 모두 선택
:valid : 유효한 값을 가지는 input 요소를 모두 선택
:invalid : 유효하지 않은 값을 가지는 input 요소를 모두 선택
출처 : 코딩의 시작, TCP School : http://tcpschool.com/css/css_selector_pseudoClass
'CSS' 카테고리의 다른 글
텍스트 드래그시 컬러값 변경하기 (0) | 2018.07.03 |
---|---|
[CSS] 필기체 글꼴유형 font-family:cursive; (0) | 2018.06.17 |
[CSS] CSS 이벤트 제어 : pointer-events (0) | 2018.06.16 |
[CSS] reset.css (0) | 2018.06.11 |
[CSS] 말줄임 처리(...) / word-wrap / word-break / white-space (0) | 2018.03.25 |