가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

 

- 방문 할

- 방문 했던

- 누르기 전, 누를 때, 누른 후

- 마우스 올렸을 때

- 텍스트 박스에 커서가 갔을 때

 

<예제>

 

 

UI요소 상태에 따른 가상 클래스

 

- 사용 가능한 란, 불가능한 란

- 라디오 박스나, 체크 박스 있을 때

 

<예제>

 

 

구조 가상 클래스

:root

 

- 하위 클래스에 모두 속성 적용 가능

:nth-child(n) / :nth-last-child(n)

 

<예제>

 

:nth-of-type(n) / :nth-last-of-type(n) / :first-child / :last-child

- 앞에서부터 n번째, 뒤에서부터 n번째

- 첫번째 자식 요소, 마지막 자식 요소

- last-child는 JQuery에 처리

 

<예제>

 

가상 요소

<예제>