CSS 입문 | CSS 선택자 | 의사 요소

의사 요소(pseudo-element)

의사 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 사용한다.

CSS 의사 요소(pseudo-elements)

의사 요소의 문법

의사 요소(pseudo-element)를 사용하기 위한 문법은 다음과 같다.

문법

선택자::의사요소이름 {속성: 속성값;}

CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 함께 표기한다.
하지만 CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분하기로 한다.
따라서 CSS3에서는 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있다.

대표적인 CSS 의사 요소

CSS에서 자주 사용하는 대표적인 의사 요소는 다음과 같다.

• ::first-letter
• ::first-line
• ::before
• ::after
• ::selection

::first-letter

이 의사 요소(pseudo-element)는 텍스트의 첫 글자만을 선택한다. 단, 블록(block) 타입의 요소에만 사용할 수 있다.

이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같다.

• font 속성
• color 속성
• background 속성
• margin 속성
• padding 속성
• border 속성
• text-decoration 속성
• text-transform 속성
• line-height 속성
• float 속성
• clear 속성
• vertical-align 속성 (단, float 속성값이 none일 경우에만)

이 속성을 이용한 예제는 아래와 같다.

<style>
    p::first-letter { color: #FF4500; font-size: 2em; }
</style>

::first-line

이 의사 요소는 텍스트의 첫 라인만을 선택한다. 단, 블록(block) 타입의 요소에만 사용할 수 있다.

이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같다.

• font 속성
• color 속성
• background 속성
• word-spacing 속성
• letter-spacing 속성
• text-decoration 속성
• text-transform 속성
• line-height 속성
• clear 속성
• vertical-align 속성

<style>
    p::first-line { color: #FF4500; font-size: 2em; }
</style>

::before

이 의사 요소는 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용한다.

<style>
    p::before { content: url("/examples/images/img_penguin.png"); }
</style>

::after

이 의사 요소는 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용한다.

<style>
    p::after { content: url("/examples/images/img_penguin.png"); }
</style>

::selection

이 의사 요소는 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용한다.

<style>
    p::selection { color: #FF4500; }
</style>

의사 요소의 동시 적용

하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용할 수 있다.

<style>
    p::first-letter { color: #FFD700; font-size: 2em; font-weight: bold; }
    p::first-line { color: #FF4500; }
</style>