[HTML/CSS/JS] CSS 가상 클래스 선택자(Pseudo-Classes)

요소 : 가상 클래스 선택자 { 
	width: 100px;
}

ex)

.title:hover {
	width:100px;
    height:200px;
}

위와 같은 형태로 가상 클래스 선택자 사용한다.

Hover

선택자 요소에 마우스 커서가 올라가 있는 동안 선택.

Active

선택자 요소에 마우스 클릭하고 있는 동안 선택.

Focus

선택자 요소에 포커스 되면 선택. 보통 div 등과 같이 focus에 영향을 받지 않는 경우 작동하지 않음. 그러나 tab키를 사용해 focus할 수 있도록 하는(클릭 시에도 가능해짐.) tabindex 속성을 통해 focus 되도록 만들 수 있음. 해당 속성의 값으로 -1이 아닌 다른 값을 넣을 경우 논리적 흐름을 방해하기 때문에 넣지 말것.

First Child

해당 선택자 형제 요소 중 첫째 선택

Last Child

해당 선택자 형제 요소 중 막내 선택

Nth Child

해당 선택자 형제 요소 중 N번째 선택. 2n(2의 배수째 선택), odd(홀수 번째만 선택) 등 특정 조건의 여러 요소 선택 가능.

부정 선택자(Negation) Not

선택자 요소가 아닌 다른 요소 선택. A:not(span) { } 이런 형태로 사용.