CSS 입문 | CSS 선택자 | 구조 의사 클래스

구조 의사 클래스(structural pseudo-class)

구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있다.

CSS에서 사용할 수 있는 구조 의사 클래스는 다음과 같다.

:first-child

:first-child는 모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 모두 선택한다.

<style>
    p:first-child { color: red; font-weight: bold; }
</style>

:last-child

:last-child는 모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택한다.

<style>
    p:last-child { color: red; font-weight: bold; }
</style>

:nth-child

:nth-child는 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택한다.

<style>
    p:nth-child(2n) { color: red; font-weight: bold; }
</style>

:nth-last-child

:nth-last-child는 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택한다.

<style>
    p:nth-last-child(3n) { color: red; font-weight: bold; }
</style>

:first-of-type

:first-of-type는 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택한다.

<style>
    p:first-of-type { color: red; font-weight: bold; }
</style>

:last-of-type

:last-of-type는 모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택한다.

<style>
    p:last-of-type { color: red; font-weight: bold; }
</style>

:nth-of-type

:nth-of-type는 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

<style>
    p:nth-of-type(2n) { color: red; font-weight: bold; }
</style>

:nth-last-of-type

:nth-last-of-type는 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

<style>
    p:nth-last-of-type(2n+1) { color: red; font-weight: bold; }
</style>

:only-child

:only-child는 자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선택한다.

<style>
    p:only-child { color: red; font-weight: bold; }
</style>

:only-of-type

:only-of-type는 자식(child) 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택한다.

<style>
    p:only-of-type { color: red; font-weight: bold; }
</style>

:empty

:empty는 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택한다.

<style>
    p:empty { width: 300px; height: 20px; background: red; }
</style>

:root

:root는 해당 문서의 root 요소를 선택한다.

<style>
    :root { background: red; }
</style>

HTML 문서에서 root 요소는 언제나 html 요소이다.