개체의 처음글자에 한개 이상의 스타일쉬트 애트리뷰트와 값의 짝들을 적용한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 처음글자에 적용되는 한개 이상의 스타일쉬트 애트리뷰트와 값의 짝들을 나타내는 문자열이다.

특기

background, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, color, styleFloat, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, margin, padding, textDecoration, textTransform와 verticalAlign 속성들은 :first-letter 가상 엘레멘트(pseudo-element)를 적용한다.

:first-letter 가상 엘레멘트는 첫 글자를 강조하여 표현하기와 같은 효과를 내기위하여 사용될 수 있다. 글자 내려짐(drop)은 문단의 처음 글자가 다른 글자보다 클 경우, 큰 글자를 표현할 수 있도록 기초라인이 아래도 이동하여 표현되고, 다음 줄의 글자들은 그 뒤에 나오게된다.

:first-letter 가상 엘레멘트는 블럭레벨 엘레멘트에 적용될 수 있다. display 속성이 block으로 설정된 경우에는 인라인 엘레멘트에도 첨부할 수 있다..

적용
개체scriptCSS IE 버전
ADDRESS BLOCKQUOTE BODY CENTER DD DIV DL DT FIELDSET FORM hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP
참조
:first-line

이 가상 클라스는 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


첫줄 첫글자는 크게 표현한다.
문단의 두번째 줄.

<STYLE>P.BigFirst:first-letter { font-size: 200%; float: left; line-height:1.2em }</STYLE>
<P class="BigFirst">첫줄 첫글자는 크게 표현한다.<BR>
문단의 두번째 줄.</P>

첫줄 첫글자는 크게 표현한다.
문단의 두번째 줄.
문단의 세번째 줄.

:first-line과 :first-letter 가상 클라스를 동시에 적용하였다.

<STYLE>
.LetterAndLine:first-line { font-weight:bold; }
.LetterAndLine:first-letter { font-size: 200%; float: left; line-height:1.2em }
</STYLE>
<P class="LetterAndLine">첫줄 첫글자는 크게 표현한다.<BR>
문단의 두번째 줄.<BR>
문단의 세번째 줄.</P>

첫글자는 크게 표시하여 강조된다.
일반적으로 아래로 확장된다.
다음 부터는 정상적으로 표현된다.
<STYLE>
.colmn { border-right:solid 2px black; padding-right:10px;  padding-left:5px; width:140px; text-justify:newspaper; }
.newsbite:first-letter { padding-left:25; padding-right:10; font-size:24; float:left; padding-bottom:5; padding-top:15; line-height:1.2em }
</STYLE>
<DIV class="colmn">
<DIV class="newsbite">첫글자는 크게 표시하여 강조된다.<BR>
일반적으로 아래로 확장된다.<BR>
다음 부터는 정상적으로 표현된다.</DIV>
</DIV>