CSS ::first-letter Selector

What You’ll Learn

The ::first-letter pseudo-element styles the first character of the first line inside a block container. It is a classic tool for drop caps and editorial typography.

Introduction

The ::first-letter selector in CSS is a pseudo-element used to apply styles to the first letter of the first line of text inside a block container.

It is commonly used to create drop caps in articles, blog posts, and book-style layouts where the opening letter appears larger and more decorative than the rest of the paragraph.

Definition and Usage

Append ::first-letter to a selector with no space before the colons: p::first-letter or article p::first-letter. Only the first character of the element’s first formatted line is styled.

📝 Syntax

The syntax for the ::first-letter pseudo-element is:

element::first-letter {
  /* CSS properties */
}

Here, element is a block container such as p, article, or h2. The pseudo-element selects only the first letter inside that element’s first line.

Basic Example

p::first-letter {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2563eb;
  float: left;
  margin-right: 0.35rem;
  line-height: 1;
}

Syntax Rules

• Use double colons :: for pseudo-elements in modern CSS.
• Works on block containers, list items, table cells, and inline-block elements.
• Plain inline elements like <span> do not support it unless display is changed.
• Only the first character of the first formatted line is matched.
• Pair with float: left and larger font-size for classic drop caps.

Supported Properties

Related Selectors

• ::first-line — styles the entire first line of text
• ::before / ::after — insert generated content before or after an element
• ::selection — styles text highlighted by the user
• initial-letter — modern CSS property for drop caps (limited support)

When to Use ::first-letter

::first-letter adds editorial polish to long-form content:

• Article openings — Create a magazine-style drop cap on the lead paragraph.
• Chapter starts — Emphasize the beginning of a story or section.
• Blog posts — Give the first paragraph a distinctive branded letter.
• Pull quotes — Accent the opening character of a highlighted quote block.
• Headings — Subtly enlarge the first letter of a title for decorative effect.

Examples Gallery

Practice ::first-letter with basic drop caps, serif editorial styling, colored backgrounds, and heading accents.

<style>
  p::first-letter {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2563eb;
    float: left;
    margin-right: 0.35rem;
    line-height: 1;
  }
</style>

<p>
  Welcome to the world of CSS! This paragraph demonstrates how you can use the
  ::first-letter selector to create a styled drop cap effect.
</p>

article p::first-letter {
  font-size: 3rem;
  font-family: Georgia, serif;
  float: left;
  line-height: 0.9;
  margin-right: 0.5rem;
  color: #1e293b;
}

.lead::first-letter {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  background: #7c3aed;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  margin-right: 0.25rem;
}

h2::first-letter {
  font-size: 1.4em;
  color: #ea580c;
  font-weight: 800;
  text-transform: uppercase;
}

⚠️ Common Pitfalls

• Inline elements — span::first-letter does not work on plain inline elements. Use a block container or set display: inline-block.
• Leading punctuation — A quote mark or number at the start gets styled, not the first letter after it.
• One character only — You cannot style the first two letters with ::first-letter; only the first character matches.
• Float on small screens — Large floated drop caps can crowd narrow viewports; test responsive layouts.
• Single vs double colon — Prefer ::first-letter (pseudo-element) over legacy :first-letter in new code.

♿ Accessibility

• Decorative only — Drop caps are visual enhancements; the full word remains in the DOM for screen readers.
• Do not convey meaning — Never use letter styling alone to communicate important information.
• Contrast — Ensure colored or background-styled first letters meet WCAG contrast ratios.
• Readability — Very large drop caps should not reduce readability of the opening lines on mobile.

💡 Best Practices