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:
- background properties
- border properties
- clear
- color properties
- float
- font properties
- line-height
- margin properties
- padding properties
- text-decoration
- text-transform
- vertical-align (only if the float is ‘none’)
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:
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