가상 클래스 선택자(Pseudo-Classes Selectors)란?

: 가 붙어있는 선택자 

 

1. HOVER : E에 마우스(포인터)가 올라가 있는 동안에만 E 선택 

• 예시 : E:hover
• 예시2 : a:hover { font-weight: bold; font-size: 20px; }
• a태그에 마우스를 가져다가 될 경우, 폰트가 볼드, 20px이 된다
• E(요소) : 기본 선택자 

 

1. ACTIVE : E를 마우스로 클릭하는 동안에만 E 선택 

• 예시 : E:active
• 클릭하는동안 변화가 발생함

 

1. FOCUS : E가 포커스 된 동안에만 E 선택 

• 예시 : E:focus (대화형 콘텐츠 input, img, tab index 에서 사용 가능)  

 

1. FIRST CHILD : E가 형제 요소 중 첫번째 요소라면 선택 

• 예시 : E:first-child 
• 같은 부모를 공유하는 관계 
• 예시2: .fruits li:first-child { color: red; } 

 

1. LAST CHILD : E가 형제 요소 중 마지막 요소라면 선택 

• 예시 : E:last-child 
• 예시2: .fruits li:last-child { color : red; } 

 

1. NTH CHILD : E가 형제 요소 중 n번째 요소라면 선택 

• (N 키워드 사용시 0부터 해석 (Zero-base))
• 예시 : E:nth-child(n)
• 몇 번째 요소를 선택하겠다 라는 것을 설정할 수 있다 

 

1. NTH OF TYPE : E의 타입(태그이름)과 동일한 타입인 형제 요수 중 E가 n번째 요소라면 선택 (n 키워드 사용시 0부터 해석(Zero-base))

• 예시 : E:nth-of-type(n)
• .fruits p:nth-of-type(1) { color: red; } : P 태그 중에서 첫번째 것이다 
• 태그를 찾는 용도로서만 사용할 것 

 

기타사항:

Transition : 애니메이션을 만들어주는 효과 ?

 - 조금더 자연스럽게 처리할 때 많이 씀

띄어쓰기 : 후손 선택자