HTML and CSS Reference
In-Depth Information
There are a handful of other pseudo-classes, all of which are covered in detail in Appendix A of
this topic.
Pseudo-Elements
As mentioned earlier, it is sometimes useful to style the first line of a paragraph or first letter of
a header. These are examples of pseudo-elements. These work in a fashion similar to pseudo-
classes:
p:first-line {
font-weight: bold;
}
h1:first-letter {
font-size: 2em;
}
In addition to
first-line
and
first-letter
, CSS offers
:before
and
:after
pseudo-elements,
which let you generate content to be displayed just before or just after a particular element. For
example, you may want to insert a comma (
,
) after every
<li>
element. Pseudo-elements are
a topic of their own (and aren't very well supported across browsers); we cover them in detail
in Appendix A.
Daisy-Chaining Selectors
It's important to note that all types of selectors can be combined and chained together. For
example, take this style rule:
#primary-content div {
color: orange
}
This code would make for orange-colored text in any
div
elements that are inside the element
with an
id
value of
primary-content
. This next rule is a bit more complex:
#primary-content div.story h1 {
font-style: italic
}
This code would italicize the contents of any
h1
elements within
div
s with the
class
value
story
inside any elements with an
id
value of
primary-content
. Finally, let's look at an over-the-top
example, to show you just how complicated selectors can get:
#primary-content div.story h1 + ul > li a[href|="http://ourcompany.com"] em {
font-weight: bold;
}
This code would boldface all
em
elements contained in anchors whose
href
attribute begins
with
http://ourcompany.com
and are descendants of an
li
element that is a child of a
ul
element
that is an adjacent sibling of an
h1
element that is a descendant of a
div
with the
class
named
story
assigned to it inside any element with an
id
value of
primary-content
. Seriously. Read it
again, and follow along, right to left.
