HTML and CSS Reference
the first paragraph to be displayed in a specific way. Because all the <p> elements are siblings of each other,
you use a type pseudo-class. For this particular case, you can use :first-of-type as follows:
This :first-of-type selector selects the first <p> element. The double colon ( :: ) syntax then selects the
first letter of that paragraph using the ::first-letter pseudo-element and applies the styling as specified.
Figure 13-4 shows how the paragraph looks.
Figure 13-4. Using a :first-of-type selector to select the first paragraph of content
Note that the specific styling is applied only to the first letter of the first paragraph because the : irst-
of-type pseudo-class is used. The other <p> elements remain unaffected by the styling.
n Note Prior to CSS3, pseudo-classes and pseudo-elements were prefixed by a colon ( : ). To distinguish between
them, CSS3 prefixes pseudo-classes with a single colon ( : ) and pseudo-elements with a double colon ( :: ). This
enables you to quickly identify that :first-of-type is a pseudo-class whereas ::first-letter is a pseudo-
The element-state pseudo-classes are useful when you're working with form fields because they select
elements based on their state. For example, suppose you want to apply specific styling to all check boxes