CSS 패seudo-엘리먼트

가상 요소는 무엇인가요?

CSS 가상 요소는 요소의 지정된 부분의 스타일을 설정하는 데 사용됩니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

  • 요소의 첫 글자, 첫 행의 스타일을 설정
  • 요소 내용 전후에 내용을 삽입

문법

가상 요소의 문법:

선택자::가상 요소 {
  속성: value;
}

::first-line 가상 요소

::first-line 가상 요소는 텍스트의 첫 행에 특수 스타일을 추가하는 데 사용됩니다.

다음 예제는 모든 <p> 요소의 첫 행에 스타일을 추가합니다:

예제

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

직접 시도해 보세요

주의:::first-line 가상 요소는 블록 요소에만 적용됩니다.

다음 속성은 적용됩니다 ::first-line 가상 요소:

  • 글꼴 속성
  • 색상 속성
  • 배경 속성
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

주의해 주세요더블 colons 문법 - ::first-line 대조 :first-line

CSS3에서, 더블 colons 문법은 가상 요소의 단일 colons 문법을 대체했습니다. 이는 W3C가 구분하려고 시도한 것입니다.가상 클래스과가상 요소시도.

CSS2와 CSS1에서, 가상 클래스와 가상 요소는 단일 colons 문법을 사용합니다.

후속 호환성을 위해, CSS2와 CSS1 가상 요소는 단일 colons 문법을 받아들입니다.

::first-letter 가상 요소

::first-letter 가상 요소는 텍스트의 첫 글자에 특수 스타일을 추가하는 데 사용됩니다.

다음 예제는 모든 <p> 요소의 중국어 텍스트의 첫 글자 형식을 설정합니다:

예제

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

직접 시도해 보세요

주의:::first-letter 가상 요소는 블록 요소에만 적용됩니다.

다음 속성은 ::first-letter 가상 요소에 적용됩니다:

  • 글꼴 속성
  • 색상 속성
  • 배경 속성
  • 밖박스 속성
  • 내박스 속성
  • 박스 속성
  • text-decoration
  • vertical-align（"float"가 "none"일 때만）
  • text-transform
  • line-height
  • float
  • clear

가상 요소와 CSS 클래스

가상 요소는 CSS 클래스와 함께 사용될 수 있습니다:

예제

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

직접 시도해 보세요

위의 예제는 class="intro"의 각 문단의 첫 글자를 빨간색과 큰 글자로 표시합니다.

여러 가상 요소

여러 가상 요소를 결합할 수도 있습니다.

다음 예제에서는 문단의 첫 번째 글자가 빨간색이고, 글자 크기가 xx-large입니다. 첫 번째 줄의 나머지 부분은 파란색으로 변하며, 소형 대문자로 표시됩니다. 이 문단의 나머지 부분은 기본 글자 크기와 색상으로 표시됩니다:

예제

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

직접 시도해 보세요

CSS - ::before 가상 요소

::before 가상 요소는 요소 내용 앞에 내용을 삽입할 수 있습니다.

다음 예제는 각 <h1> 요소의 내용 앞에 이미지를 삽입합니다:

예제

h1::before {
  content: url(smiley.gif);
}

직접 시도해 보세요

CSS - ::after 가상 요소

::after 가상 요소는 요소 내용 뒤에 내용을 삽입할 수 있습니다.

다음 예제는 각 <h1> 요소의 내용 뒤에 이미지를 삽입합니다:

예제

h1::after {
  content: url(smiley.gif);
}

직접 시도해 보세요

CSS - ::selection 가상 요소

::selection 가상 요소는 사용자가 선택한 요소 부분에 맞춰 매칭됩니다.

다음 CSS 속성은 가상 요소에 적용할 수 있습니다: ::selection:

  • color
  • background
  • cursor
  • outline

다음 예제는 선택된 텍스트가 노란 배경 위에 빨간색으로 표시됩니다:

예제

::selection {
  color: red; 
  background: yellow;
}

직접 시도해 보세요

모든 CSS 가상 요소

선택자 예제 예제 설명
::after p::after 각 <p> 요소 뒤에 내용을 삽입합니다.
::before p::before 각 <p> 요소 앞에 내용을 삽입합니다.
::first-letter p::first-letter 각 <p> 요소의 첫 글자를 선택합니다.
::first-line p::first-line 각 <p> 요소의 첫 번째 줄을 선택합니다.
::selection p::selection 사용자가 선택한 요소 부분을 선택합니다.

모든 CSS 가상 클래스

선택자 예제 예제 설명
:active a:active 활성 링크를 선택합니다.
:checked input:checked 모든 선택된 <input> 요소를 선택합니다.
:disabled input:disabled 모든 비활성화된 <input> 요소를 선택합니다.
:empty p:empty 자식 요소가 없는 각 <p> 요소를 선택합니다.
:enabled input:enabled 모든 활성화된 <input> 요소를 선택합니다.
:first-child p:first-child 부모의 첫 번째 자식 요소로 선택된 각 <p> 요소를 선택합니다.
:first-of-type p:first-of-type 부모의 첫 번째 <p> 요소로 선택된 각 <p> 요소를 선택합니다.
:focus input:focus 포커스를 받은 <input> 요소를 선택합니다.
:hover a:hover 마우스가 올라가 있는 링크를 선택합니다.
:in-range input:in-range 지정된 범위 내의 값을 가진 <input> 요소를 선택합니다.
:invalid input:invalid 유효하지 않은 값을 가진 모든 <input> 요소를 선택합니다.
:lang(언어) p:lang(it) lang 속성 값이 "it"로 시작하는 각 <p> 요소를 선택합니다.
:last-child p:last-child 부모의 마지막 자식 요소로 선택된 각 <p> 요소를 선택합니다.
:last-of-type p:last-of-type 부모의 마지막 <p> 요소로 선택된 각 <p> 요소를 선택합니다.
:link a:link 모든 방문하지 않은 링크를 선택합니다.
:not(선택자) :not(p) 모든 <p> 요소가 아닌 각 요소를 선택합니다.
:nth-child(n) p:nth-child(2) 부모의 두 번째 자식 요소로 선택된 각 <p> 요소를 선택합니다.
:nth-last-child(n) p:nth-last-child(2) 마지막 자식 요소에서 세 번째 자식 요소로 계산하여 부모의 두 번째 자식 요소로 선택된 각 <p> 요소를 선택합니다.
:nth-last-of-type(n) p:nth-last-of-type(2) 부모의 두 번째 <p> 요소로 사용되는 각 <p> 요소를 선택합니다. 마지막 자식 요소에서 시작합니다.
:nth-of-type(n) p:nth-of-type(2) 부모의 두 번째 <p> 요소로 사용되는 각 <p> 요소를 선택합니다.
:only-of-type p:only-of-type 부모의 유일한 <p> 요소로 사용되는 각 <p> 요소를 선택합니다.
:only-child p:only-child 부모의 유일한 자식 요소로 사용되는 <p> 요소를 선택합니다.
:optional input:optional "required" 속성이 없는 <input> 요소를 선택합니다.
:out-of-range input:out-of-range 지정된 범위 밖의 값을 가진 <input> 요소를 선택합니다.
:read-only input:read-only "readonly" 속성을 지정한 <input> 요소를 선택합니다.
:read-write input:read-write "readonly" 속성이 없는 <input> 요소를 선택합니다.
:required input:required "required" 속성을 지정한 <input> 요소를 선택합니다.
:root root 요소의 뿌리 요소를 선택합니다.
:target #news:target 현재 활성화된 #news 요소를 선택합니다. (이 링크가 포함된 앵커 이름을 클릭했습니다).
:valid input:valid 모든 유효한 값을 가진 <input> 요소를 선택합니다.
:visited a:visited 모든 방문한 링크를 선택합니다.