HTML and CSS Reference
In-Depth Information
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:
p:first-of-type::first-letter {
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-
Element-State Pseudo-Classes
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
Search WWH ::

Custom Search