HTML and CSS Reference
In-Depth Information
•
letter-spacing
•
text-decoration
•
vertical-align
•
text-transform
•
line-height
These properties can be useful when you're styling opening paragraphs—for instance,
the code
p:first-line {
text-transform:uppercase;
}
makes the first formatted line (meaning the first line as it is rendered by the browser, based on
the layout, font size, and other variables, rather than how the line breaks in your markup) all
uppercase. Simple, yes?
In addition, the
:first-line
pseudo-element is intelligent and will style the text of an
element nested within the target element, as long as both are
block-level
and the nested ele-
ment is not positioned or floated. For example, this means that the following rule:
div:first-line { font-weight:bold; }
will style the text within this markup, even though the
p
element isn't targeted:
<div><p>Some line of text</p></div>
Since the text is still the first line, it matches the selector.
:first-letter
Similar to the
:first-line
pseudo-element,
:first-letter
selects the first alphanumeric
character of the targeted element, as long as there is no other content (such as an image) pre-
ceding it. The target element must also be defined or styled as
block-level
,
inline-block
,
list-item
,
table-caption
, or
table-cell
.
The main purpose of this pseudo-element is to allow you to style drop caps and initial
caps; as with
:first-line
, there is also a restricted set of properties that you can use:
•
font-properties
•
text-decoration
•
text-transform
•
letter-spacing
•
word-spacing
•
line-height
•
float
•
vertical-align
(when not floated)
