Head First HTML with CSS

specialized selectors
#1 More Selectors
While you’ve already learned the most common selectors, here are a few
more you might want to know about...
Pseudo-elements
You know all about pseudo-classes, and pseudo-elements are similar. Pseudoelements
can be used to select parts of an element that you can’t conveniently
wrap in a or a or select in other ways. For example, the
first-letter pseudo-element can be used to select the first letter of the
text in a block element, allowing you to create effects like initial caps and
drop caps. There’s one other pseudo-element called first-line, which
you can use to select the first line of a paragraph. Here’s how you’d use
both to select the first letter and line of a element:
p:first-letter {
font-size: 3em;
}
p:first-line {
font-style: italic;
}
Attribute selectors
img[width] { border: black thin solid; }
640 Appendix
Pseudo-elements use the same
syntax as pseudo-classes.
img[height=”300”] { border: red thin solid; }
Here we’re making the first
letter of the paragraph large,
and the first line italics.
Attribute selectors are not currently well supported in current
browsers; however, they could be more widely supported in the
future. Attribute selectors are exactly what they sound like: selectors
that allow you to select elements based on attribute values. You use
them like this: This selector selects all
image[alt~=”flowers”] { border: #ccc thin solid; }
This selector selects all images
that have an alt attribute that
includes the word “flowers”.
images that have a width
attribute in their XHTML.
This selector selects all images
that have a height attribute
with a value of 300.