View source for CSS/Selectors/pseudo-elements/:first-letter

<div style='float: right;background: white;border:1px dashed black;padding: 1ex;margin-left: 1ex;'>

* [[CSS/Selectors|CSS Selectors]]
** [[CSS/Selectors#Pseudo-elements|Pseudo-elements]]
*** [[CSS/Selectors/pseudo-elements/:first-line|<span>:</span>:first-line ]]
*** [[CSS/Selectors/pseudo-elements/:first-letter|<span>:</span>:first-letter ]]
*** [[CSS/Selectors/pseudo-elements/:before|<span>:</span>:before ]]
*** [[CSS/Selectors/pseudo-elements/:after|<span>:</span>:after ]]

</div>

= Pseudo-classes ::first-letter =

The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.

== Syntax ==
<pre>
selector::first-line{ preperties }
</pre>


== Point, Note ==
*In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.
*In CSS a ::first-line pseudo-element is similar to an inline-level element if its ‘float’ property is ‘none’; otherwise, it is similar to a floated element.
*The following properties that apply to ::first-letter pseudo-elements:
**font properties
**‘text-decoration’
**‘text-transform’
**‘letter-spacing’
**‘word-spacing’
**‘line-height’
**‘float’
**‘vertical-align’ (only if ‘float’ is ‘none’)
**margin properties
**padding properties
**border properties
**color property
**background properties


== Example ==
=== Example A ===
[style.css]
  p:first-letter{
    font-size: 200%;
    color: red;
  }


[index.html]
<pre>
<body>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</body>
</pre>


[[File:Css3_selectors_first-letter_A.png‎]]

=== Example B ===
The following CSS will make a drop cap initial letter span about two lines:

[style.css]
  p:first-letter{
    font-size: 300%;
    color: red;
    float: left;
  }


[index.html]
<pre>
<body>
<p>The World Wide Web Consortium (W3C) is an international community where Member organizations,
   a full-time staff, and the public work together to develop Web standards.
   Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe,
   W3C's mission is to lead the Web to its full potential.
   Contact W3C for more information.
</p>
</body>
</pre>

[[File:Css3_selectors_first-letter_B.png‎]]

CSS defines the ::first-letter pseudo-element in [http://www.w3.org/TR/css3-selectors/#first-letter 7.2. The ::first-letter pseudo-element].