의사 요소
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)::backdropExperimental::before (:before)::cue::cue-region::first-letter (:first-letter)::first-line (:first-line)::grammar-errorExperimental::markerExperimental::part()Experimental::placeholderExperimental::selection::slotted()::spelling-errorExperimental
명세
| 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 |