Skip to content
Related Articles

Related Articles

Improve Article

CSS ::first-letter Selector

  • Difficulty Level : Medium
  • Last Updated : 19 Oct, 2021
Geek Week

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :