• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

 

결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
background CSS - background-repeat 속성 ★ - 배경이미지 반복 (= 배경반복 = background…
background CSS - background-attachment 속성 - 배경이미지 고정 (= background-atta…
background CSS - background-position 속성 = 배경위치 (= background-position속성…
border CSS - border 속성 ★ - 테두리일괄 (= border속성 = 보더속성) (상속X)
border CSS - border-style 속성 ★ - 테두리모양일괄 (= border-style속성 = 보더스타일속…
border CSS - border-width 속성 - 테두리두께일괄 (= 테두리너비일괄 = border-width속성 …
border CSS - border-color 속성 - 테두리색상일괄 (= 테두리색깔일괄 = border-color속성 …
border CSS - border-top 속성 - 테두리상단일괄 (= border-top속성 = 보더탑속성 / 보더톱속…
border CSS - border-right 속성 - 테두리우측일괄 (= 테두리오른쪽일괄 = border-right속성…
border CSS - border-bottom 속성 - 테두리하단일괄 (= border-bottom속성 = 보더바텀속성…
border CSS - border-left 속성 - 테두리좌측일괄 (= 테두리왼쪽일괄 = border-left속성 = …
border CSS - border-top-style 속성 - 테두리상단모양 (= 테두리상단스타일 = border-top…
border CSS - border-top-width 속성 - 테두리상단두께 (= 테두리상단너비 = border-top-…
border CSS - border-top-color 속성 - 테두리상단색상 (= 테두리상단색깔 = border-top-…
border CSS - border-right-style 속성 - 테두리우측모양 (= border-right-style속…
border CSS - border-right-width 속성 - 테두리우측두께 (= 테두리우측너비 = 테두리오른쪽너비 …
border CSS - border-right-color 속성 - 테두리우측색상 (= 테두리오른쪽색상 = 테두리우측색깔…
border CSS - border-bottom-style 속성 - 테두리하단스타일 (= 보더바텀스타일) (상속 X)
border CSS - border-bottom-width 속성 - 테두리하단너비 (= 테두리하단두께 = border-b…
border CSS - border-bottom-color 속성 - 테두리하단색깔 (= 보더바텀컬러속성 = border-…
3/25
목록
찾아주셔서 감사합니다. Since 2012