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 {
font-size:50px;
float:left;
line-height:1;
margin-right:5px;
}
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.
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
