개체의 첫번째 줄에 적용된다.

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

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

특기

background, clear, color, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, textDecoration, textTransform, verticalAlign과 wordSpacing 속성들은 :first-line 가상엘레멘트에 적용된다.

첫줄의 길이는 문서의 너비나 글자 크기등 몇가지 요인에 의하여 결정된다.

:first-line 가상 엘레멘트는 블럭레벨 엘레멘트에 적용될 수 있다. 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-letter

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


문단의 첫번째 줄.
문단의 두번째 줄.
문단의 세번째 줄.

:first-line 가상엘레멘트가 설정된 className 속성을 호출하여 문단의 첫줄을 표현하였다.

<STYLE>.firstLine:first-line { color:blue; font-weight:bold }</STYLE>
<P class="firstLine">문단의 첫번째 줄.<BR>
문단의 두번째 줄.<BR>
문단의 세번째 줄.</P>

문단의 첫번째 줄.
문단의 두번째 줄.
문단의 세번째 줄.

문단의 첫번째 줄.
문단의 두번째 줄.
문단의 세번째 줄.

:first-line과 :first-letter 가상엘레멘트를 동시에 적용하였다.

<STYLE>
.expClassA:first-line { font-weight:bold;color:blue; }
.expClassA:first-letter { font-size: 200%; float: left; }
</STYLE>
<P class="expClassA">문단의 첫번째 줄.<BR>
문단의 두번째 줄.<BR>
문단의 세번째 줄.</P>
<STYLE>
.expClassB:first-line { font-weight:bold;color:blue; }
.expClassB:first-letter { font-size: 200%; float: left; line-height:2em }
</STYLE>
<P class="expClassB">문단의 첫번째 줄.<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>