[CSS] 가상 클래스 선택자

가상 클래스란?

가상 클래스는 접두사 콜론 :을 사용하며, 선택자의 끝에 붙여 상태를 특정하는 키워드이다.

가상 클래스 종류

1) :hover

:hover 가상 클래스 선택자는 요소에 마우스를 올려 놓은 동안 해당 요소를 선택하는 선택자이다.

요소에 마우스를 올려놓은 상태를 호버(hover)상태라고 한다.

ex)

button:hover {
    color: orange;
}

2) :active

:active 가상 클래스 선택자는 요소에 마우스를 갖다대고 누르는 순간부터 떼는 시점까지 해당 요소를 선택한다.

ex)

button:active {
    background: black;

3) :focus

:focus 가상 클래스는 요소가 포커스되었을 동안 해당 요소를 선택한다.

• 텍스트 입력 필드가 활성화된 경우에 사용

'포커스(focus)'란 요소가 키보드 입력이나 상호작용을 받을 준비가 된 상태를 말한다.

input:focus { /* 요소가 포커스되었을 동안 해당 요소를 선택됨 */
    background-color: yellow;
}

4) :checked

:checked 가상 클래스 선택자는 라디오 버튼(<input type="radio">)과 체크박스(<input type="checkbox">)가 체크된 상태일 때 해당 요소를 선택한다.

/* 체크된 input 요소를 선택 */
input:checked {
    border: none;
    outline: 3px solid red;
}

/* 체크된 input 요소를 선택해서
   바로 뒤에 있는 label 요소에 스타일을 지정 */
input:checked + label {
    background-color: yellowgreen;
    color: white;
}

5) :first-child

:first-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 제일 첫 번째에 위치하는 요소를 선택한다.

• :first-child 가상 클래스 선택자는 :nth-child(1)과 동일하다.

6) :last-child

:last-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 마지막에 위치하는 요소를 선택한다.

• :last-child 가상 클래스 선택자는 :nth-last-child(1)과 동일하다.

7) :nth-child(n)

:nth-child(n) 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들을 선택한다.

 

매개변수 n에는 아래와 같은 값들이 들어갈 수 있다.

1. 음이 아닌 정수 인덱스 값
2. 키워드 값(odd 또는 even)
3. An+B 형태의 사용자 지정 패턴 (A: 증감 단계, B: 오프셋, n: 0부터 시작하는 모든 양의 정수)

ex)

li:nth-child(2) { /* 음이 아닌 정수 가능 */
    border: 3px solid blue;
}
li:nth-child(odd) { /* odd(홀수 번째) 또는 even(짝수 번째) 키워드 적용 가능 */
    background-color: yellowgreen;
}
li:nth-child(4n) { /* 사용자 지정 패턴(An+B의 형태) 가능 */
    color: red;
}