[HTML+CSS] 가상 선택자

종류

:link : 방문하지 않은 링크에 스타일 적용

:visited : 방문했던 링크에 스타일 적용

:hover : 지정한 요소에 마우스 포인터를 올려놓을 때 스타일 적용

:active : 지정한 요소를 클릭했을시 스타일 적용

:focus : 지정한 요소에 초점이 맞춰졌을 때 스타일 적용(마우스 올려짐, tab으로 이동됨 등)

:target : 앵커 대상에 스타일을 적용

:disabled : 사용할 수 없는 상태일 때

:checked : 선택한 요소의 스타일 적용

 

:first-child :  부모 안에 있는 모든 요소 중 첫번째 자식 요소 선택

:last-child : 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 선택

:nth-child(n) : 부모 안에 있는 모든 요소 중 n번째 자식 요소를 선택

 

 

 

예시

먼저 html로 리스트를 만들고, CSS를 이용하여 리스트 스타일을 없애고, 글씨를 크게한다.

 

 

 

CSS로 가서, 각 리스트마다, 커서를 올려놓으면 마우스 포인터가 뜨게하고 색깔을 빨강으로

클릭시, 색깔을 짙은 분홍색으로 바꿔본다.

 

 

 

커서를 올려보니 빨간색으로 변한걸 확인할 수 있다.

마우스 클릭 버튼을 누를 시, 짙은 분홍으로 변했다.

 

 

 

리스트1의 태그를 a태그로 바꾸고, 방문했을 시, 폰트가 짙은 파란색으로 변하게 함.