5.4.4 구조적 가상 클래스 선택자
구조적 가상 클래스 선택자는 HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법입니다.
표 5-6 구조적 가상 클래스 선택자
|
종류 |
설명 |
|
E:first-child |
E 요소의 첫 번째 자식 요소를 선택자로 지정합니다. |
|
E:last-child |
E 요소의 마지막 자식 요소를 선택자로 지정합니다. |
|
E:nth-child(n) |
E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택합니다. |
|
E:nth-last-child(n) |
E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택합니다. |
|
E:nth-of-type(n) |
부모 요소의 자식 요소 중 n번째로 등장하는 E 요소를 선택합니다. |
|
E:nth-last-of-type(n) |
부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소를 선택합니다. |
|
E:first-of-type |
부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택합니다. |
|
E:last-of-type |
부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소를 선택합니다. |
구조적 가상 클래스는 헷갈릴 만한 내용이 많으니 차근히 살펴보겠습니다.