..

Search

30) 구조 의사 클래스

구조 의사 클래스

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

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

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

 

- :first-child
- :last-child
- :nth-child
- :nth-last-child

- :first-of-type
- :last-of-type
- :nth-of-type
- :nth-last-of-type

: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 요소입니다.

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

의사 클래스 설명
:first-child 모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 모두 선택함.
:last-child 모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함.
:last-of-type 모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-of-type 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-last-of-type 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:only-child 자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선택함.
:only-of-type 자식(child)  요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택함.
:empty 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택함.
:root 문서의 root 요소를 선택함.

연습문제