[CSS] 가상 클래스 선택자

[개요]

선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상(추상) 클래스라 합니다.

 

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus  - 포커스 되었을 때(input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1)  - 홀수 번째 자식

위는 대표적인 가상 클랙스의 예시이며, 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면, HTML, CSS 및 Javascript의 코드를 효과적으로 줄일 수 있습니다.

 

[사용법]

 

.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }

 

[예시]

[결과]

마우스를 올려보세요.