totn CSS

CSS :first-letter selector

This CSS tutorial explains how to use the CSS selector called :first-letter with syntax and examples.

Description

The CSS :first-letter selector allows you to target the first letter of a block element.

Syntax

The syntax for the :active CSS selector is:

element:first-letter { style_properties }

Parameters or Arguments

element
The type of element that you wish to style the first letter for.
style_properties
The CSS styles to apply to the first letter element.

Note

  • The :first-letter selector is a pseudo-class that allows you to target the first letter of a block element.

Browser Compatibility

The CSS :first-letter selector has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 5.5+ (IE 5.5+)
  • Opera 3.5+
  • Safari (WebKit)

Example

We will discuss the :first-letter selector below, exploring examples of how to use this selector in CSS to apply styling.

With <p> tag

Let's look at a CSS :first-letter example where we apply the :first-letter selector to a <p> tag.

The CSS would look like this:

p:first-letter { color: red; font-size: 26px; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>Here is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this (The :first-letter selector would style the <p> tags as follows):

CSS

In this CSS :first-letter example, the color of the "T" in the first <p> tag and the color of the "H" in the second <p> tag will display as large red text since they are the first letters in the <p> tags. All other text will not be styled by the :first-letter selector.

With <div> tag

Let's look at a CSS :first-letter example where we apply the :first-letter selector to a <div> tag.

The CSS would look like this:

div:first-letter { color: blue; font-size: 1.5em; }

The HTML would look like this:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</p>
  <p>We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>
<div>
  <p>What's New in CSS</p>
</div>

The result would look like this (The :first-letter selector would style the <div> tags as follows):

CSS

In this CSS :first-letter example, the color of the "T" in the first <div> tag and the color of the "W" in the second <div> tag will display as large blue font since they are the first letters in the <div> tags. All other text will not be styled by the :first-letter selector.

Share on: