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):
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):
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.
Advertisements