[ CSS 입문 ] 가상 클래스 선택자

| 개요

 

선택자 뒤에 ":가상이벤트"를 같이 사용하게 되면 각 이벤트에 따라 스타일을 적용할 수 있습니다.

이 내용을 가상(추상)클래스라고 합니다.

 

•  :link  - 방문한 적이 없는 링크
•  :visited  - 방문이 있었던 링크
•  :hover  - 마우스를 해당 부분에 롤오버 했을 때
•  :active  - 마우스를 해당 부분에 클릭 했을 때
•  :focus  - 포커스 되었을 때 (input 태그 등)
•  :first-child  - 첫번째 요소
•  :last-child  - 마지막 요소

 

위 내용은 가상(추상)클래스의 대표적인 예시이며 

미리 정의된 가상 클래스를 효과적으로 이용하면 

웹상에서 좀 더 동적이고 효과적인 스타일을 적용할 수 있습니다.

 

 

| 사용법

table .box:first-child { background-color: blue; }
.box:hover { background-color: red; }
div#box span:hover { background-color: green; }
div#box a:active span { color: yellow; }

 

1. table태그 하위 box클래스들중 첫번째 선택자에 백그라운드컬러를 파란색으로 주어라

2. box클래스 선택자에 마우스 롤오버 했을 때 백그라운드컬러를 빨간색으로 주어라

3. box라는 아이디를 가진 div의 하위 span태그에 마우스 롤오버 했을 때 백그라운드컬러를 초록색으로 주어라

4. box라는 아이디를 가진 div의 하위 a태그를 클릭하면 그 하위 span태그에 글 컬러를 노랑색으로 주어라

 

위 내용과 같이 무언가 이벤트가 발생하였을때, 스타일을 변경하므로써 

조금 더 동적이고 생동감 있는 디자인이 가능해집니다.

4번과 같이 가상 클래스는 부모-자식 선택자 중 누구에게든 붙여 사용이 가능하며

선택자를 나열했을때 제일 마지막에 있는 자식선택자에 스타일이 적용됩니다.