CSS selector involving pseudo class first-child and dropcap

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:

1. Find every p element.

   • If not found, ignore.

2. 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.

3. If it matches both pseudo-classes, check whether this p is a child of article.

   • If not, ignore.

4. If so, grab its :first-letter.

5. 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.