CSS 가상 선택자_CSS

- 사용자 행동을 예측하여 css을 정의한다.

- 선택자 : 가상선택자명{}

 

hover

- 마우스 선택자 위에 올렸을 때

#hover01:hover{background-color:red;color:#fff;}

 

active

- 마우스로 대상을 누르고 있을 때

#active01:active{background-color:#000;color:#fff;}

 

focus

-포커스 되었을 때 ( 커서 활성화 )

#focus01:focus{border:5px solid #f00;}

 

child

- 선택자에 상하관계가 표현되어야한다.

- first-child : 선택된 대상의 첫번째 요소 선택

- last- child : 선택된 대상의 마지막번째 요소 선택

#focus01:focus{border:5px solid #f00;}
#list01 li:first-child{background-color:#f00;} #list01 li:last-child{background-color:#0f0;}

 

nth-child(xn)

- 선택자에 상하관계가 표현되어야한다.

- 인수 -> 특정 숫자 : 자식 요소를 특정 숫자에 순번에 맞는 자식 요소 선택

#list02 li:nth-child(3){color:#f00;}

- 인수 -> 2n : 짝수인 자식요소 선택

#list03 li:nth-child(2n){color:#f00;}

- 인수 -> 2n-1 : 홀수인 자식요소 선택

#list04 li:nth-child(2n-1){color:#f00;}