[CSS] CSS 선택자 - 가상 클래스

가상 클래스 선택자 (Pseudo-Classes)

 

ABC:hover

선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

a:hover {
  color:red;
}

ABC:active

선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

a:active {
  color:red;
}

ABC:focus

선택자 ABC 요소가 포커스되면 선택

input:focus {
  background-color:red;
}

ABC:first-child

선택자 ABC가 형제 요소 중 첫째라면 선택

.fruits span:first-child {
  color:red;
}

ABC:last-child

선택자 ABC가 형제 요소 중 막내라면 선택

.fruits h3:last-child {
  color:red;
}

ABC:nth-child(n)

선택자 ABC가 형제 요소 중 (n)째라면 선택, n, 2n, 2n+1, n+2

.fruits *:nth-child(2) {
  color:red;
}

ABC:not(XYZ)

선택자 XYZ가 아닌 ABC 요소 선택

.fruits *:not(span) {
  color:red;
}