CSS selector involving pseudo class first-child and dropcap - css

Question

I need to format HTML similar to below. Basically a quote is optional, and I need to dropcap the first letter of the body paragraph.
<article>
<p class="quote"> <!-- quote is optional -->
Genius begins great works; labor alone finishes them.-- Joseph Joubert
</p>
<p> <!-- "L" is a dropcap -->
Life is like a box of chocolates.
</p>
<p>...</p>
<p>...</p>
</article>
My CSS looks like this:
article > p:first-child:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
p.quote {
font-weight: bold;
}
It doesn't work currently when the quote is introduced. AFAIK I can't select the article's first child P which is not class "quote." I'll use jQuery if I can't figure this out, but for now I'm looking for a way to do it CSS only.
Thanks in advance!

Answer 1

If you're OK with using CSS3 selectors, try using these (grouped together):
/* Select the first child if it's not a .quote */
article > p:not(.quote):first-child:first-letter,
/* Or, if the first child is a .quote, select the following one instead */
article > p.quote:first-child + p:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
See the jsFiddle demo
Otherwise I think you'll have to play with some overrides to get the desired effect.
Some explanation
The negation pseudo-class :not() is always processed independently of all other types, IDs, classes and pseudo-classes in the compound selector. This is regardless of how you arrange it with your other selectors.
To put it another way: you can't use :not() to remove, or filter out, elements that match what's in the negation, from a selection matched by the rest of the simple selector. It also means that the set of the elements matched by the :*-child() and :*-of-type() pseudo-classes is not affected by :not().
So the first selector above,
article > p:not(.quote):first-child:first-letter
works roughly like this:
Find every p element.
If not found, ignore.
If found, check whether this p is the :first-child and if it's :not(.quote).
If it's not the first child, ignore.
If it has the quote class, ignore.
If it matches both pseudo-classes, check whether this p is a child of article.
If not, ignore.
If so, grab its :first-letter.
Apply rules.
The second selector, on the other hand, is relatively straightforward:
article > p.quote:first-child + p:first-letter
All it does is take the p that comes right after the first child of article if it's a p.quote, and apply rules to its :first-letter.

Answer 2

Why don't you use <q> or <blockquote> for the quote? then you can use
p:first-of-type:first-letter

Answer 3

p.dropCap:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}