가상 선택자란 클래스 선택자처럼 동작하지만 클래스 선택자는 아닌, 각 Element들의 상태에 따른 선택이 이루어지는 선택자를 의미한다
- 방문한 적이 없는 링크 :link
- 방문한 적이 있는 링크 :visited
- 마우스를 올려둔 상태 :hover
- 포커싱된 상태 :focus
:visited 가상선택자를 이용해서 이전에 방문했던 링크는 보라색으로 표시되는 것을 알 수 있다
가상 클래스 선택자
<동작을 나타내는 가상 클래스 선택자>
ABC:hover
.box:hover {
width: 300px;
color: aqua;
}선택자 ABC 요소에 마우스 커서가 올라가 있는 동안
ABC:active
선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
ABC:focus
선택자 ABC요소가 포커스되면 선택
<특정한 요소를 선택하는 가상 클래스 선택자>
ABC:first-child
선택자 ABC가 형제요소 중 첫째라면 선택
형제요소 중에 첫째인데 div태그를 만족 못하므로 아무것도 선택되지 않는다
ABC:last-child
HTML
<body>
<div class="fruits">
<span>사과</span>
<span>귤</span>
<div>오렌지</div>
<p>바나나</p>
<h3>자두</h3>
</div>
</body>CSS
.fruits h3:last-child {
color: red;
}선택자 ABC가 형제요소 중 막내라면 선택
ABC:nth-child(n)
CSS
.fruits *:nth-child(2) {
color: red;
}
선택자 ABC가 형제 요소 중 (n)째라면 선택
n은 0부터 시작! (Zero-Based Numbering)
부정선택자 ABC:not(XYZ)
선택자 XYZ가 아닌 ABC 요소 선택
