[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

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

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+ ○

Supported in all versions

IE

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.

Home

Tweet

シェアする