blockquote>p+p {
background: none;
}
This fairly complex rule uses both a child selector (>) and an adjacent selector (+),
and styles the paragraph that comes immediately after the paragraph that??™s a child
element of the blockquote (which is the paragraph with the cite element). The
rule overrides the background value defined in step 5 for paragraphs within the
block quote). Note that this assumes the quote itself will only be a single paragraph.
If you have multi-paragraph quotes, you??™ll need to apply a class to the final
paragraph and set the quote-close.gif image as a background on that, rather
than on blockquote p.
Note that the advanced selector shown isn??™t understood by versions of Internet
Explorer prior to 7. The best workaround for that browser is to use conditional comments
(see Chapter 9) to remove the quote graphic backgrounds.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
104
Required files pull-quote.html and pull-quote.css from the chapter 3 folder.
What you??™ll learn How to use CSS classes to create alternatives to the default pull
quote. In this example, you??™ll create a narrow pull quote that floats
to the right of the body copy.
Completed files pull-quote-2.html and pull-quote-2.css from the chapter 3
folder.
1. Amend the HTML. First, add a class to the blockquote element so that it can be
targeted in CSS:
2. Position the blockquote. Create a new CSS rule that targets the blockquote from
the previous step by using the selector blockquote.
Pages:
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181