목차
- ::first-letter 예제 - 요소의 첫번째 글자색 변경
- ::first-letter 정의
- ::first-letter 예제 - 특정요소선택은 class 선택자 이용
- ::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>
결과보기