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

1. ::first-letter 예제 - 요소의 첫번째 글자색 변경
2. ::first-letter 정의
3. ::first-letter 예제 - 특정요소선택은 class 선택자 이용
4. ::first-letter 예제 - 인라인요소엔 적용 X

::first-letter 예제 - 요소의 첫번째 글자색 변경 

 

<style>

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

</style>

 

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

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

 

결과보기

::first-letter 정의

 

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

 

---

 

1.

• ( :nth-letter(숫자) / ::last-letter ) 형식의 가상선택자는 존재 X.
• 블럭요소에만 사용 가능. (★ 인라인요소엔 적용 X)

 

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

• font 속성들
• color 속성들
• background 속성들
• margin 속성들
• padding 속성들
• border 속성들
• text-decoration
• vertical-align (float가 'none' 경우일 때만)
• text-transform
• line-height
• float
• clear

 

3.

• 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>

 

결과보기

::first-letter 예제 - 인라인요소엔 적용 X

 

<!-- 블럭요소 적용 O -->

<style>

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

</style>    

<div>Homzzang.com</div>

<!-- 인라인요소 적용 X -->

<style>

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

</style>  

<span>Homzzang.com</span>

 

결과보기