HTML and CSS Reference
In-Depth Information
Pseudo-Element Selectors
You may encounter situations in which you want to select a particular portion of an HTML
document but there is not a defined element associated with it. CSS provides the ability to
style portions of a document tree without a unique element associated with the content.
Because in some ways this creates an element to effect this change, such selectors are
dubbed
pseudo-element selectors
.
:first-letter and :first-line Pseudo-Elements
To style the first line of a paragraph or a first character of a paragraph, it would be easy
enough to specify a CSS selector. However, we might not actually have a full element that
the rule is bound to, so a pseudo-element is thus implied. As an example, say you want to
make the first character of a paragraph called “intro” large, you can use a pseudo-element
rule
:first-letter
to bind style.
p:first-letter {font-size: xx-large; background-color: red;}
would make every first letter of a paragraph large and red. We can also make the initial line
of paragraphs a different style using the
:first-line
pseudo-element:
p:first-line {font-size: xx-large; text-decoration: underline;}
These pseudo-classes aren't limited solely to
<p>
tags but they are generally limited to block
elements. A simple example of applying these pseudo-elements is shown here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
First Letter and First Line Pseudo-Elements
</title>
<style type="text/css" media="all">
p#intro:first-letter {font-size: 5em; font-weight: bold;
float: left; margin-right: .1em;
color: #999;}
p#intro:first-line {font-size: 1.5em; font-weight: bold;}
</style>
</head>
<body>
<p id="intro">
It was the best of times, it was the worst of times, it was
the age of wisdom, it was the age of foolishness, it was the epoch of
belief, it was the epoch of incredulity, it was the season of Light, it was
the season of Darkness, it was the spring of hope, it was the winter of
despair, we had everything before us, we had nothing before us, we were all
going direct to heaven, we were all going direct the other way - in short,
the period was so far like the present period, that some of its noisiest
authorities insisted on its being received, for good or for evil, in the
superlative degree of comparison only.
</p>
</body>
</html>
