의사 요소
CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line
을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
css
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
참고: 의사 클래스는 의사 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용합니다.
구문
selector::pseudo-element { property: value; }
하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.
참고 :
참고: 규칙을 따라 단일 콜론(:
) 대신 이중 콜론(::
)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.
표준 의사 요소 색인
::after (:after)
::backdrop
Experimental::before (:before)
::cue
::cue-region
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
Experimental::marker
Experimental::part()
Experimental::placeholder
Experimental::selection
::slotted()
::spelling-error
Experimental
명세
Specification |
---|
CSS Pseudo-Elements Module Level 4 |
CSS Positioned Layout Module Level 4 |
CSS Shadow Parts |
WebVTT: The Web Video Text Tracks Format |
브라우저 호환성
브라우저 | 최소 버전 | 지원 |
---|---|---|
Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
1.0 (1.5) | :pseudo-element ::pseudo-element |
|
Opera | 4.0 | :pseudo-element |
7.0 | :pseudo-element ::pseudo-element |
|
Safari (WebKit) | 1.0 (85) | :pseudo-element ::pseudo-element |