가상 클래스 선택자
개요
선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.
: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; }
예제
<html>
<head>
<style>
.box{
background-color: #09c;
padding: 10px;
margin-bottom: 20px;
}
.hover-box:hover{
background-color: orange;
}
.focus-input:focus{
background: red;
}
.container > div{
margin-top: 20px;
width: 100px;
height: 100px;
float: left;
background-color: orange;
}
.container > div:nth-child(2n+1) {
background-color: red
}
</style>
</head>
<body>
<div class="box hover-box">
마우스를 올려보세요.
</div>
<input class="focus-input" type="text" value="클릭해보세요">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style="clear: both"></div>
</body>
</html>