::first-letter CSS pseudo-element selector
::first-letter CSS pseudo-element selector
CSS pseudo-element that allows styling only the first "letter" of text within an element. Useful for implementing initial caps or drop caps styling.
| Spec | http://www.w3.org/TR/css3-selectors/#first-letter |
|---|---|
| Status | W3C Recommendation |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 | 62 | ||||
| 56 | 61 | TP | 48 | ||
| 16 | 55 | 60 | 11 | 47 | |
| 11 | 15 | 54 | 59 | 10.1 | 46 |
| 10 | 14 | 53 | 58 | 10 | 45 |
| 9 | 13 | 52 | 57 | 9.1 | 44 |
| 8 (3) | 12 | 51 | 56 | 9 | 43 |
| Show all | |||||
| 7 (3,4) | 50 | 55 | 8 | 42 | |
| 6 (3,4) | 49 | 54 | 7.1 | 41 | |
| 5.5 | 48 | 53 | 7 | 40 | |
| 47 | 52 | 6.1 | 39 | ||
| 46 | 51 | 6 | 38 | ||
| 45 | 50 | 5.1 | 37 | ||
| 44 | 49 | 5 | 36 | ||
| 43 | 48 | 4 (1) | 35 | ||
| 42 | 47 | 3.2 (1) | 34 | ||
| 41 | 46 | 3.1 | 33 | ||
| 40 | 45 | 32 | |||
| 39 | 44 | 31 | |||
| 38 | 43 | 30 | |||
| 37 | 42 | 29 | |||
| 36 | 41 | 28 | |||
| 35 | 40 | 27 | |||
| 34 | 39 | 26 | |||
| 33 | 38 | 25 | |||
| 32 | 37 | 24 | |||
| 31 | 36 | 23 | |||
| 30 | 35 | 22 | |||
| 29 | 34 | 21 | |||
| 28 | 33 | 20 | |||
| 27 | 32 | 19 | |||
| 26 | 31 | 18 | |||
| 25 | 30 | 17 | |||
| 24 | 29 | 16 | |||
| 23 | 28 | 15 | |||
| 22 | 27 | 12.1 | |||
| 21 | 26 | 12 | |||
| 20 | 25 | 11.6 | |||
| 19 | 24 | 11.5 (2) | |||
| 18 | 23 | 11.1 (2) | |||
| 17 | 22 | 11 (2) | |||
| 16 | 21 | 10.6 (2) | |||
| 15 | 20 | 10.5 (2) | |||
| 14 | 19 | 10.0-10.1 (2) | |||
| 13 | 18 | 9.5-9.6 | |||
| 12 | 17 | 9 | |||
| 11 | 16 | ||||
| 10 | 15 | ||||
| 9 | 14 | ||||
| 8 | 13 | ||||
| 7 | 12 | ||||
| 6 | 11 | ||||
| 5 | 10 | ||||
| 4 | 9 | ||||
| 3.6 | 8 | ||||
| 3.5 | 7 | ||||
| 3 (1) | 6 | ||||
| 2 (2) | 5 | ||||
| 4 (1) | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 | |||||||||||
| 10.3 | all | 56 | 10 | 37 | 59 | 54 | 11 | 11.4 | 5 | 1.2 | 7.12 |
| 10.0-10.2 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 4 | ||||||
| 9.3 | 4.4 | 12 | |||||||||
| 9.0-9.2 | 4.2-4.3 | 11.5 (2) | |||||||||
| Show all | |||||||||||
| 8.1-8.4 | 4.1 | 11.1 (2) | |||||||||
| 8 | 4 | 11 (2) | |||||||||
| 7.0-7.1 | 3 | 10 (2) | |||||||||
| 6.0-6.1 | 2.3 (1) | ||||||||||
| 5.0-5.1 | 2.2 | ||||||||||
| 4.2-4.3 | 2.1 | ||||||||||
| 4.0-4.1 | |||||||||||
| 3.2 | |||||||||||
Notes
The spec says that both letters of digraphs which are always capitalized together (such as "IJ" in Dutch) should be matched by ::first-letter, but no browser has ever implemented this.
Excludes punctuation immediately after the first letter from the match. (The spec says it should be included in the match.)
Acts like the first character is always a letter even when it's not. For example, given "!,X;", "!," is matched instead of the entire string.
Only recognizes the deprecated :first-letter pseudo-class, not the ::first-letter pseudo-element.
Only matches the very first character. The spec says that surrounding punctuation should also match.
Bugs
In webkit-based browsers first character of text inside elements, styled with
::first-letter, is not highlighted while selecting the text. See bugFirefox appears to incorrectly cut off the top & bottom of a
::first-lettercharacter in certain cases see Firefox bug #1233271
Resources
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-first-letter
