• Post category:CSS

How to Use CSS first-letter Pseudo Element Selector

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.

<style type="text/css">
P::first-letter {
font-size: 25px; }
width: 77%;

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



css first-letter selector

  1. Here, we have three <p> tags with some text inside.
  2. Then we select “p::first-letter“, it selects every first letter of the paragraph element. And we set the font-size property to 25px.
  3. See the above output, every first letter of the paragraph text is displayed 25px.
READ ALSO  Easy Way to Create 2 Equal Columns in CSS Grid Layout

Leave a Reply