150 CHAPTER 4 Getting started with CSS3
You can use pseudo elements only at the end of the selector chain to set the style of the
pseudo element. The following is a list of pseudo elements.
■■::first-line elects the first line where p::first-line selects the first line of each paraS -
graph. You can apply a different style to the first line of a paragraph.
■■::first-letter elects the first letter where p::first-letter selects the first letter of each S
paragraph. You can apply a different style to the first letter of a paragraph. This option
is useful when you want to create a large first letter.
■■::before Inserts generated textual content inside the element where
p::before{ content: “Note: “; } inserts “Note: “ into each paragraph directly before the
existing content. In addition to adding the textual content, you can provide a style
for the content when p::before{ content: “Note: “; color: red;} sets the color of “Note: ”
to red.
■■::after Inserts generated textual content inside each element when p::after{ content:
“Done!“; } inserts “Done!” into each paragraph directly after the existing content. In
addition to adding the textual content, you can provide a style for the textual content
when p::after{ content: “Done!”; color: red;} sets the color of “Done!” to red.NOTE ONE OR TWO COLONS BEFORE PSEUDO ELEMENTS
CSS3 recommends one colon (:) before pseudo classes and two colons (::) before pseudo
elements as a way to tell the difference between the two. CSS3 also allows one-colon usage
on existing rules to be backward compatible with existing browsers, so most people will
continue to use one colon to be backward compatible with older browsers. All new pseudo
elements are required to have two colons.Grouping selectors
You can group selectors when you will be applying the same style by separating each selector
with a comma. Consider the following example, in which the two style rules have the same
declaration blocks.
button {
background-color: white;
color: gray;
}
p {
background-color: white;
color: gray;
}In this scenario, you can condense the two style rules into a single style rule as shown in
the following example, which applies the same style to all button and paragraph elements.
button, p {
background-color: white;