W3cubDocs

/Support Tables

::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 https://www.w3.org/TR/css3-selectors/#first-letter
Status W3C Recommendation
IE Edge Firefox Chrome Safari Opera
      108    
    107 107 TP  
    106 106 16.1  
11 105 105 105 16.0 91
10 104 104 104 15.6 90
9 103 103 103 15.5 89
8 (3) 102 102 102 15.4 88
Show all
7 (3,4) 101 101 101 15.2-15.3 87
6 (3,4) 100 100 100 15.1 86
5.5 99 99 99 15 85
  98 98 98 14.1 84
  97 97 97 14 83
  96 96 96 13.1 82
  95 95 95 13 81
  94 94 94 12.1 80
  93 93 93 12 79
  92 92 92 11.1 78
  91 91 91 11 77
  90 90 90 10.1 76
  89 89 89 10 75
  88 88 88 9.1 74
  87 87 87 9 73
  86 86 86 8 72
  85 85 85 7.1 71
  84 84 84 7 70
  83 83 83 6.1 69
  81 82 81 6 68
  80 81 80 5.1 67
  79 80 79 5 66
  18 79 78 4 (1) 65
  17 78 77 3.2 (1) 64
  16 77 76 3.1 63
  15 76 75   62
  14 75 74   60
  13 74 73   58
  12 73 72   57
    72 71   56
    71 70   55
    70 69   54
    69 68   53
    68 67   52
    67 66   51
    66 65   50
    65 64   49
    64 63   48
    63 62   47
    62 61   46
    61 60   45
    60 59   44
    59 58   43
    58 57   42
    57 56   41
    56 55   40
    55 54   39
    54 53   38
    53 52   37
    52 51   36
    51 50   35
    50 49   34
    49 48   33
    48 47   32
    47 46   31
    46 45   30
    45 44   29
    44 43   28
    43 42   27
    42 41   26
    41 40   25
    40 39   24
    39 38   23
    38 37   22
    37 36   21
    36 35   20
    35 34   19
    34 33   18
    33 32   17
    32 31   16
    31 30   15
    30 29   12.1
    29 28   12
    28 27   11.6
    27 26   11.5 (2)
    26 25   11.1 (2)
    25 24   11 (2)
    24 23   10.6 (2)
    23 22   10.5 (2)
    22 21   10.0-10.1 (2)
    21 20   9.5-9.6
    20 19   9
    19 18    
    18 17    
    17 16    
    16 15    
    15 14    
    14 13    
    13 12    
    12 11    
    11 10    
    10 9    
    9 8    
    8 7    
    7 6    
    6 5    
    5 4 (1)    
    4      
    3.6      
    3.5      
    3 (1)      
    2 (2)      
Safari on iOS Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser KaiOS Browser
16.1                        
16.0 all 105 10 64 105 104 11 13.4 18.0 13.1 13.18 2.5
15.6   4.4.3-4.4.4 7 12.1     10   17.0      
15.5   4.4   12         16.0      
15.4   4.2-4.3   11.5 (2)         15.0      
Show all
15.2-15.3   4.1   11.1 (2)         14.0      
15.0-15.1   4   11 (2)         13.0      
14.5-14.8   3   10 (2)         12.0      
14.0-14.4   2.3 (1)             11.1-11.2      
13.4-13.7   2.2             10.1      
13.3   2.1             9.2      
13.2                 8.2      
13.0-13.1                 7.2-7.4      
12.2-12.5                 6.2-6.4      
12.0-12.1                 5.0-5.4      
11.3-11.4                 4      
11.0-11.2                        
10.3                        
10.0-10.2                        
9.3                        
9.0-9.2                        
8.1-8.4                        
8                        
7.0-7.1                        
6.0-6.1                        
5.0-5.1                        
4.2-4.3                        
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.

  1. Excludes punctuation immediately after the first letter from the match. (The spec says it should be included in the match.)

  2. 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.

  3. Only recognizes the deprecated :first-letter pseudo-class, not the ::first-letter pseudo-element.

  4. 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 bug

  • Firefox appears to incorrectly cut off the top & bottom of a ::first-letter character in certain cases see Firefox bug #1233271

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-first-letter