○Pseudo Class

 ▷선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일때 만족하는 조건

 ▷~~:[Pseudoclass] 형식으로 정의한다.

 

 ▶동적(dynamic) - 링크의 상태

  ▷hover : 마우스가 위에 있을경우

  ▷focue : 키보드/마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가진 상태

  ▷link : 방문하지 않은 링크

  ▷visited : 방문한 링크

  ▷active : 선택된 링크

 

 ▶상태(states) - 입력의 상태

  ▷checked : input요소 중 체크된 상태의 input요소

  ▷enabled : input요소 중 사용가능한 input요소

  ▷disabled : input요소 중 사용불가능한 input요소

 

 ▶구조(structural) - 계층구조에서 위치

  ▷first-child : 모든 자식 요소 중 맨 앞에 위치하는 요소

  ▷last-child : 모든 자식 요소 중 맨 마지막에 위치하는 요소

  ▷nth-child() : 모든 자식 요소 중 앞에서 n번째에 위치하는 요소 (2n : 2의 배수와 같이 활용가능)

  ▷nth-last-child() : 모든 자식 요소 중 뒤에서 n번째에 위치하는 요소

  ▷first-of-type : 모든 자식 요소에서 맨 처음으로 등장하는 특정 타입의 요소

  ▷last-of-type : 모든 자식 요소에서 맨 마지막으로 등장하는 특정 타입의 요소

  ▷nth-of-type : 모든 자식 요소에서 앞에서 n번째로 등장하는 특정 타입의 요소

  ▷nth-last-of-type : 모든 자식 요소에서 뒤에서 n번째로 등장하는 특정 타입의 요소

  ▷only-child : 자식 요소를 하나만 가지는 요소의 자식 요소

  ▷only-of-type : 자식 요소로 특정 타입의 요소 단 하나만 가지는 요소의 자식 요소

  ▷empty : 자식을 가지지 않은 요소

  ▷root : 해당 문서의 root요소

 

 ▷developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

'컴퓨터 언어 > CSS' 카테고리의 다른 글

Background  (0) 2020.09.24
Position  (0) 2020.09.24
Display  (0) 2020.09.24
text 속성  (0) 2020.09.23
CSS 기본  (0) 2020.09.22

+ Recent posts