5. 가상 클래스 선택자

-가상 클래스 선택자 : 요소의 상태를 이용해 선택자를 지정하는 방법

/* 형식 */
기준 요소:가상 클래스 선택자{/* CSS 코드 */}

가상 클래스는 매우 많지만 다 알 필요는 없음, 자주 쓰이는 건 다음과 같다.

 

1. 링크 가상 클래스 선택자

a태그에서 발생할 수 있는 링크 상태를 이용해 선택

• :link 한 번도 방문하지 않은 링크일 때 선택
• :visited 한 번이라도 방문한 적이 있는 링크일 때 선택

2. 동적 가상 클래스 선택자

사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택

• :hover 요소에 마우스를 올리면 해당 태그가 선택자로 지정
• :active 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정

3. 입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용해 선택자로 지정

• :focus 입력 요소에 커서가 활성화되면 선택자로 지정
• : checked 체크박스가 표시되어 있으면 선택자로 지정
• :disabled 상호작용 요소가 비활성되면(disabled 속싱이 사용되면) 선택자로 지정
• :enabled 상호작용 요소가 활성화되면(disabled 속성이 사용되지 않은 상태면) 선택자로 지정

4. 구조적 가상 클래스 선택자

HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법

• :first-child 기준 요소의 첫 번째 자식 요소를 선택자로 지정
• :last-child 마지막 자식 요소를 선택자로 지정
• : nth-child(n) 기준 요소가 부모 요소의 자식 요소 중 n 번째 순서면 선택
• :nth-last-child(n) 기준요소가 부모 요소의 자식 요소 중 마지막에서 n 번째 순서면 선택
• :nth-of-type(n) 부모 요소의 자식 요소 중 n번째로 등장하는 기준 요소를 선택
• :nth-last-of-type(n) 부모 요소의 자식 요소 중 마지막에서 n 번째로 등장하는 기준 요소를 선택
• :first-of-type 부모 요소의 자식 요소 중 첫 번째로 등장하는 기준요소를 선택
• :last-of-type 부모 요소의 자식 요소 중 마지막으로 등장하는 기준요소를 선택