가상 클래스(의사 클래스) pseudo-class

가상 클래스(의사 클래스) pseudo-class

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

 

 

1. 동적 의사 클래스(dynamic pseudo-classes)

  - :link = 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태

  - :visted = 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태

  - :hover = 사용자의 마우스 커서가 링크 위에 올라가 있는 상태

  - :active = 사용자가 마우스로 링크를 클릭하고 있는 상태

  - :focus = 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태

 

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

 - :checked

 - :enabled

 - :disabled

 

3. 구조 의사 클래스(structural pesudo-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