CSS first-letter selector
In this article, we will about the CSS first-letter selector. The CSS first-letter is one of the pseudo elements selectors.
CSS pseudo-selectors:
- Pseudo-classes are added to the selectors using : symbol.
- Pseudo-elements are added to the selectors using :: symbol.
- Pseudo-classes allow us to apply styles to HTML elements based on their current status or their special property.
- Pseudo-elements allow us to apply styles to certain parts of html elements and generate content dynamically at run time.
first-letter selector
It is used to access every first letter of the selected element. See the given example below.
<html>
<head>
<title></title>
</head>
<style type="text/css">
P::first-letter {
font-size: 25px; }
*{
width: 77%;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Output:
- Here, we have three <p> tags with some text inside.
- Then we select “p::first-letter“, it selects every first letter of the paragraph element. And we set the font-size property to 25px.
- See the above output, every first letter of the paragraph text is displayed 25px.
