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

의사 요소(pseudo-element)

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

CSS 의사 요소(pseudo-elements)

의사 요소 설명
::first-letter 텍스트의 첫 글자만을 선택함.
::first-line 텍스트의 첫 라인만을 선택함.
::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용함.
::after 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용함.
::selection 해당 요소에서 사용자가 선택한 부분만 선택함.

의사 요소의 문법

의사 요소(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>