CSS 코스

가상 클래스 선택자

개요

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

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

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

사용법

.box{ background-color: blue; }
.box:hover{ background-color: red; }
div#c_box span:hover {background-color: green; }

예제

<html>
<head>
<style>
	.box{ background-color: #09c; }
	.box:hover{ background-color: orange; }
	div#c_box span:hover {background-color: lightgreen; }
</style>
</head>
<body>
	<div class="box">마우스를 올려보세요.</div><br>
	<div id="c_box">
		<span>span 태그에만 적용됩니다. </span>밖에는 적용되지 않습니다.
	</div>
</body>
</html>