Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:first-letter

[CSS Selector] E:first-letter

Using selector:first-letter, you can apply styles to the first letter of the first rendered line of an element. This is commonly called a "pseudo-element." It does not work in IE8 or earlier.

Note that this applies to the first letter of the first line as rendered by the browser, not as written in the source code. It also does not apply if an img element or similar precedes the first letter. Additionally, :first-letter only works when the display property is set to block, inline-block, table-cell, table-caption, etc. It does not apply to inline elements.

Sample Code

style.css

/* make the first letter red */
p:first-letter { color: red;}

/* newspaper-style drop cap (large first letter) */
p:first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    line-height: 1;
    margin-right: 0.1em;
    color: #c0392b;
}

/* apply drop cap only to the first paragraph of a chapter */
.chapter-start p:first-child::first-letter {
    font-size: 4em;
    color: #2c3e50;
}

Browser Preview

p:first-letter { color: red;} /* Makes the first letter of the first line red. */

<p>
	The first letter of the first rendered line becomes red.
	Note that this is not the first letter of the first line in the source code.<br>
</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 △

7 △

6 △

Opera

7+ ○

6 △

5 △

4 △

↑ Supported as ':first-letter'

2 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

37+ ○

36 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

If you find any errors or copyright issues, please contact us.

Home