CSS 가상 클래스(Pseudo-classes) – 개념 및 선택자 목록

button:hover { /* 마우스 커서를 올렸을 때만 요소 선택 */
    background-color: orange;
}
input:checked { /* 체크된 상태일 때만 요소 선택 */
    background-color: red;
}

/* 함수형 가상 클래스 */
li:nth-child(2) { /* 두 번째 자식일 때만 요소 선택 */
    background-color: blue;
}
button:not(.active) { /* active 클래스 값이 없을 때만 요소 선택 */
    background-color: silver;
}