::first-letter - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:first-letter

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. first-letter

Description

The ::first-letter selector selects the first letter of the specified element.

The ::first-letter selector can only be used with block-level elements.

The following properties can be used with ::first-letter.

  • font properties
  • color properties?
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align if float is 'none'
  • text-transform
  • line-height
  • float
  • clear

Example

Select the first letter of every <p> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
    font-size: 200%;
    color: red;
}
</style><!--from  ww w  .j  av a 2 s  .co m-->
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>this is a test.</p>
<p>this is a paragraph.</p>
<p>I <b>like</b> css.</p>

</body>
</html>

Related Tutorials