We'll continue our discussion on advanced selectors with the cousin of pseudo-classes, Pseudo-Elements. Much as static pseudo-classes assign virtual classes to parts of the document, pseudo-elements insert virtual elements into a document.
Unlike pseudo-classes, pseudo-elements must be the target of the rule. Pseudo-elements are not allowed to provide context for a descendant target.
The First-Letter Pseudo-Element
The First-Letter pseudo-element targets the first letter of a block-level element.
General Syntax for First-Letter Pseudo-Element
block-element:first-letter { declarations... }
This selector is supported in Windows IE 5.5 or above, and of course, all modern browsers.
It is often used to create a special character effect for opening paragraphs. Let's dive right into an example, shall we?
Example Style sheet
p:first-letter {
font-size: 400%;
font-style: italic;
font-family: 'times new roman', times, garamond, serif;
font-weight: bold;
line-height: 90%;
color: #960;
background-color: inherit;
float: left;
margin-right: 2px;
}
Example Markup
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis felis. Sed pulvinar diam et nulla. Praesent mauris
risus, lacinia in, consequat et, adipiscing ut, leo. Morbi
neque ante, pharetra et, pulvinar ac, facilisis a, augue.
Aenean adipiscing erat at nisi. Aliquam volutpat nibh in ipsum.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Cras in arcu a diam mattis
convallis. Curabitur consectetuer, magna quis volutpat tincidunt,
elit ante sollicitudin magna, nec mattis ante turpis eu lacus.
Donec libero risus, vehicula at, consequat ut, volutpat quis,
pede. Duis malesuada rhoncus risus.
</p>
Rendered Example
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Aenean adipiscing erat at nisi. Aliquam volutpat nibh in ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras in arcu a diam mattis convallis. Curabitur consectetuer, magna quis volutpat tincidunt, elit ante sollicitudin magna, nec mattis ante turpis eu lacus. Donec libero risus, vehicula at, consequat ut, volutpat quis, pede. Duis malesuada rhoncus risus.
As you can see, the first letter of the paragraph was targeted, as if there was an element spanning the letter. This virtual element can be represented this way:
<p>
<p:first-letter>L</p:first-letter>orem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec iaculis ...
... pede. Duis malesuada rhoncus risus.
</p>