가상 클래스 선택자가 뭐지??

가상 클래스 선택자

요소의 상태를 이용해 선택자를 지정하는 방법

✔️ 가상 클래스 선택자 앞에는 : 기호 붙임

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

링크 가상 클래스 선택자

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

:link

한 번도 방문하지 않은 링크

:visited

한 번이라도 방문한 적 있는 링크

See the Pen 링크 가상 클래스 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

동적 가상 클래스 선택자

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

:hover

특정 요소에 마우스를 올렸을 때

:active

마우스 왼쪽 버튼을 누르고 있는 동안

See the Pen Untitled by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

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

입력 요소의 특정 상태를 이용해 선택하는 방법

✔️ 자주 사용하는 4가지

:focus

입력 요소에 커서가 활성화된 상태

:checked

체크박스 요소에 체크한 상태

:disabled

상호작용 요소가 비활성화된 상태

:enabled

상호작용 요소가 활성화된 상태

See the Pen 입력 요소 가상 클래스 선택자 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

구조적 가상 클래스 선택자

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

:first-child, :last-child

첫 번째 자식 태그와 마지막 자식 태그

See the Pen :first-child, :last-child by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

:nth-child(n), :nth-last-child(n)

n번째 자식 태그와 끝에서 n번째 자식 태그

See the Pen nth-child(n) by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

See the Pen nth-last-child(n) by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

:nth-of-type(n), :nth-last-of-type(n)

n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그

See the Pen nth-of-type(n) by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

See the Pen nth-last-of-type(n) by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

:first-of-type, :last-of-type

부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

See the Pen :first-of-type by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

See the Pen :last-of-type by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.