Pseudo-elements
|
| ||||
| ||||
|
|
Just like pseudo-classes are used to select elements that have special properties that cannot be expressed with other kinds of selectors, the concept of pseudo-elements was created to apply style rules to portions of a document that cannot be otherwise selected.
Pseudo-elements are specified in selectors exactly as pseudoclasses
are: by using a colon (:). The two types of pseudo-elements
defined by CSS1 are first-letter and
first-line. The first-letter pseudo-element
selects a theoretical element that contains only the first letter of an
element. The first-line pseudo-element selects a
theoretical element that contains only the first line of an element.
Unfortunately, neither of these pseudo-elements are supported by
current browsers. If they where, they could be used to create
interesting effects such as drop capitals. The following example gives
two rulesets and a P element to which they apply. The
rendering of this element is actually a picture of what it should look
like if a browser supporting typographical pseudo-elements displayed
this paragraph. The first line of the element is made bold, and the
first letter is made three times larger and floats to the left (I will
explain these properties, like all the others I have used so far, in
future tutorials).
P:first-line {
font-weight: bold;
}
P:first-letter {
font-size: 300%;
float: left;
}
<P>This is a rather long paragraph that should wrap into more than one line if the viewing window is sufficiently narrow and the text is sufficiently long, which should be the case with most setups.
That's all for this time, folks. This tutorial has covered the
selector syntax described in CSS level 1. CSS2 defines some more
advanced forms of selectors, but since these are currently unsupported
by browsers, and are pretty specialised anyway, so we'll look at those
later on. In tutorial 7, we'll take a peek at how a browser should
combine style rules from embedded style sheets, linked style sheets, and
STYLE attributes to decide which should apply to an
element, and understand why Cascading Style Sheets, well, cascade...
