CHAPTER 11. HOVER AND PSEUDO CLASSES 118
Most browsers seem to be okay with these being specified either way (one
colon or two colons). It was originally one colon, so browsers will probably
continue to accept that. CSS validators may be more picky.
::first-line- style the first line (not sentence) of a paragraph differently
than the other lines.
::first-letter- style the first letter of a paragraph differently than the other
letters. Make it twice as big, for example, or use a different font.
Drop Caps:One fun thing to do with the first letter is to make it a lot
bigger and then to drop it down so that it takes up two lines. This is called
a “drop capital.” We can do this by adding a float left to the letter, which
will allow the rest of the paragraph to slide up a bit.
p::first-letter { font-size: 200%; float: left; }
Of course, once you are styling the size and float, you might as well think
about picking some fancy font to go with it.
11.3 First Child
Sometimes we want to style the first or last paragraph differently than the
others. Perhaps we want different padding, or we only want the first letter of
the first paragraph to be special, not the first character of every paragraph.
We can target specific paragraphs by number.
p:first-child { ... } / first paragraph /
p:nth-child(2) { ... } / second paragraph /
p:nth-child(2n) { ... } / even paragraphs /
p:nth-child(2n+1) { ... } / odd paragraphs /
p:nth-child(3n) { ... } / paragraph 3, 6, 9, ... /
p:last-child { ... } / last paragraph /
p:nth-last-child(2) { ... } / paragraph before last /
p:only-child { ... }
First, last, and nth are all counted from the parent element. If the para-
graphs are part of a div, then it would be the parent.