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.
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-
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|=""] em {
font-weight: bold;
This code would boldface all em elements contained in anchors whose href attribute begins
with 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.
Search WWH ::

Custom Search