Export (0) Print
Expand All
6 out of 10 rated this helpful - Rate this topic

::first-letter pseudo-element

Applies one or more styles to the first letter of the object.

CSS 2.1, Section 5.12.2Internet Explorer 9

Syntax

sel::first-letter {...}

Parameters

sel

A simple selector.

Standards information

Remarks

The background, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, clear, color, float, font, font-family, font-size, font-style, font-variant, font-weight, line-height, margin, padding, text-decoration, text-transform, and vertical-align properties apply to the ::first-letter pseudo-element.

The ::first-letter pseudo-element can be used to create common typographical effects, such as drop caps. Drop caps is the effect obtained when the first character of a paragraph is rendered in a font larger than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

The ::first-letter pseudo-element can be attached to block-level elements. It can be attached to inline elements if you set the corresponding display property to block.

In versions of Windows Internet Explorer prior to Windows Internet Explorer 9, as well as in IE8 Standards mode and earlier, only the one-colon form of this pseudo-element is recognized—that is, :first-letter.

Beginning with Internet Explorer 9, the ::first-letter pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::first-letter pseudo-element. For more information, see the Pseudo-elements section of the W3C's CSS3 Selectors specification.

Examples

The following examples show how to use the ::first-letter pseudo-element.

The following rule causes the first letter in the paragraph to be a drop cap that is twice the size of the other letters in the paragraph.

Click to view sample.


<style>
    P.BigFirst::first-letter { font-size: 200%; float: left }
</style>
<p class="BigFirst">The first letter in this paragraph will be 
twice the size of the other letters in this paragraph.  The first 
letter in this paragraph will be twice the size of the other 
letters in this paragraph.</p>

The following rules illustrate the cumulative effect of attaching ::first-line and ::first-letter pseudo-elements to an element.

Click to view sample.


<style>
    .LetterAndLine::first-line   { text-transform: uppercase }
    .LetterAndLine::first-letter { font-size: 200%; float: left }
</style>
<p class="LetterAndLine">The first letter in this paragraph will 
be twice the size of the other letters in the paragraph.  The 
first line in this paragraph will have uppercase letters.  
Subsequent lines will render normally.  The first letter in this 
paragraph will be twice the size of the other letters in the 
paragraph.  The first line in this paragraph will have uppercase 
letters.  Subsequent lines will render normally.</p>

The following example uses the ::first-letter pseudo-element to create a typographical effect that looks like a column in a newspaper.

Click to view sample.


<style>
    .col1 { border-right: black 1px solid; 
        padding-right: 10px; 
        padding-left: 5px; 
        width: 140px;
        text-justify: newspaper
        }
    .newsbite::first-letter { padding-right: 5px; 
        padding-left: 5px; 
        font-size: 24pt; 
        left: 0px; 
        float: left; 
        padding-bottom: 5px; 
        padding-top: 5px; 
        position: absolute; 
        top: 100px
        }
</style>
<div class="col1">
<div class="newsbite">Initial caps are a great a way to dress up 
your text. You can use them to draw attention to the beginning of 
an article. The initial caps used here are commonly called drop
caps.</div>
</div>

See also

::first-line

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.