Also, just like :nth-child, :nth-last-child accepts the odd and even arguments and doesnt have to use

a negative value for n.

:only-child
Theres one more child pseudo-class to look at before we move on, and that is :only-child. It works like youd expect, by targeting any element that is the only child of its parent. This might come in handy should you have a dynamically generated list that contains only one item, in which case you might wish to decrease the margins. ul li:only-child { } margin-bottom:2em;

:first-of-type
The type pseudo-classes tend to work in the same way as the child selectors, the key difference being that the type pseudo-classes only target those elements that are the same as the element to which the selector is applied. They are most useful when you cant guarantee that there wont be any different child elements in place. For example, if an hr was placed between each paragraph, by using :first-of-type, we can ensure that we target only the paragraphs. Taking our :first-child example from earlier, we can use the <div id="introduction"> as a styling hook. Using :first-of-type, we would write div#introduction p:first-of-type { font-size:18px; font-weight:bold; } For added fun, we can combine :first-of-type with the ::first-letter pseudo-element from CSS1 (yes, 1) to style the first letter of the first paragraph in the introduction (shown in Figure 8-15). CSS3 introduced a new double-colon (::) syntax for pseudoelements to distinguish between them and pseudo- classes such as :hover. Heres the double-colon syntax in an example: div#introduction p:first-of-type::first-letter { font-size:60px;

296

} float:left; width:auto; height:50px; line-height:1; margin-right:5px;