CSS ::first-letter Selector

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

59 - Views

4 mins

1 Comment

Photo Credit to CodeToFun

Introduction

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

This is often used to create a visually distinct typographical effect, such as a drop cap in articles or blog posts.

Syntax

The signature of the ::first-letter Selector is as follows:

Syntax

Copied

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

The selector can be any block-level element such as <p>, <div>, or <article>.
The ::first-letter pseudo-element targets only the very first letter in the block of text.

Example

Here is an example that demonstrates how to style the first letter of a paragraph:

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS ::first-letter Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <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>
</body>
</html>

CSS

Copied

/* Style the first letter */
p::first-letter {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3498db;
    float: left;
    margin-right: 5px;
    line-height: 1;
}

In this example:

The first letter of the paragraph ("W") is styled with a larger font size, bold weight, and a custom color.
The float: left property pushes the first letter to the left, creating a drop cap effect, while margin-right adds spacing between the drop cap and the rest of the text.

Usage Tips

The ::first-letter pseudo-element can be combined with other CSS properties such as text-transform, font-style, and letter-spacing to create various stylistic effects.
Typically used for typographical emphasis in the first letter of a paragraph or section heading.
Keep in mind that only block-level elements support the ::first-letter pseudo-element.

Supported Properties

The CSS properties that can be applied to ::first-letter include:

font properties (e.g., font-size, font-weight)
color
background
padding and margin
text-transform and letter-spacing
float
line-height

Common Pitfalls

Limited Elements: The ::first-letter pseudo-element only works with block-level elements such as paragraphs or headings. Inline elements like <span> or <a> do not support it.
Multiple Letters: It applies only to the first letter of the block. If your text starts with a number or special character, the pseudo-element will affect that instead.
Browser Consistency: While modern browsers support ::first-letter, always test across browsers to ensure consistent rendering.

Example with Drop Cap

In traditional publishing, drop caps are often used to begin chapters or sections. Here’s a more sophisticated example:

CSS

Copied

article p::first-letter {
    font-size: 3rem;
    font-family: 'Georgia', serif;
    float: left;
    line-height: 0.9;
    margin-right: 10px;
    color: #2c3e50;
}

This creates a larger drop cap effect with a serif font, providing an elegant, professional look.

Conclusion

The ::first-letter selector is a powerful tool for applying unique styles to the first letter of a block-level element, making it perfect for creating standout typographical effects.

Use this pseudo-element to enhance the visual impact of your content and improve readability on your website.