Pseudo-class

pseudo은 '허위의, 가짜의' 뜻을 가지고 있다.

css에서는 의사 클래스라고 불리우고 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다.

 

1 ) 동적 의사 클래스 (Dynamic pseudo-class)

 

의사 클래스	설명
:link	사용자가 아직 한 번도 이 링크를 통해서 페이지를 방문하지 않은 상태를 선택 (기본 상태)
:visited	사용자가 한 번이라도 이 링크를 통해서 페이지를 방문한 상태를 선택
:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택
:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 선택
:focus	포커스를 가지고 있는 input 요소를 모두 선택

 

 

2) 상태 의사 클래스 (UI element statess pseudo-classes)

 

의사 클래스	설명
:checked	체크된(checked) 상태의 input 요소 모두 선택
:enabled	사용할 수 있는 input 요소 모두 선택
:disabled	사용할 수 없는 input 요소 모두 선택

:checked의 예제 =>

 

<style>

    input { color: #FFEFD5; }

    input:checked + span { color: #CD853F; }

</style>

 

 

3) 구조 의사 클래스 (structural pseudo-class)

 

HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선태할 수 있다.

 

의사 클래스	설명
:first-child	모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소 모두 선택
:last-child	모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택
:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소 모두 선택  ex) li:nth-child(3)
: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	특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.