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 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 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
.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…