Open In App

CSS ::first-letter Selector

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

The ::first-letter selector CSS Pseudo-element is used to apply the style to the first letter of the first line of a block-level element, the condition is it should not be preceded by other content ( such as images or inline tables).

Syntax:

 ::first-letter {
// CSS Property
}

Accepted Properties:

Example: This example illustrates the use of the ::first-letter selector where the color & font-size property is used to style the first letter.

HTML
<!DOCTYPE html> <html> <head> <style>  p::first-letter {  font-size: 250%;  color: green;  }  </style> </head> <body style="text-align: center;"> <h1 style="color:green;"> CSS ::first-letter selector </h1> <p>Geeks classes is an extensive classroom programme.</p> </body> </html> 

Output:

firstselector

Supported Browsers: The browser supported by ::first-letter selector are listed below: 

  • Google Chrome 1.0
  • Firefox 1.0
  • Microsoft Edge 12.0
  • Safari 1.0
  • Opera 7.0 Partial from 3.5
  • Internet Explorer 9.0 Partial from 5.5

Explore