[selector] CSS - ::first-letter 가상선택자 - 요소의 첫번째글자 선택 (= 퍼스트레러선택자 = 퍼스트레터선택자 = 가상요소, IE9)

 

<style>

p::first-letter {color: red;}

</style>

 

<p>홈짱닷컴 (www.homzzang.com)</p>

<p>CSS 무료 강의 사이트입니다.</p> 

 

결과보기

 

지정요소의 첫번째 글자 선택

 

---

 

1.
nth-letter(숫자) 또는 last-letter 형식의 가상선택자는 존재하지 않음.

 

2.

블럭요소에만 사용 가능. 

3.
아래 속성들과 함께 사용 가능.

font 속성들

color 속성들

background 속성들

margin 속성들

padding 속성들

border 속성들

text-decoration

vertical-align (float가 'none' 경우일 때만)

text-transform

line-height

float

clear

 

4.
IE9 이상 최신브라우저 지원.
일부 구형 브라우저는 단콜론형태만 지원. (:first-letter)
최신 브라우저는 쌍콜론형태 지원. (::first-letter)

 

::first-letter 예제 - 특정요소선택은 class 선택자 이용.

 

<style>

p.hz::first-letter {color: red;}

</style>

 

<p class='hz'>홈짱닷컴 (www.homzzang.com)</p>

<p>CSS 무료 강의 사이트입니다.</p>

 

결과보기