Question

I’m having trouble targetting just the first letter in this example here: http://jsfiddle.net/gB94x/

Obviously the “read more” isn’t supposed to have the drop cap too.

The HTML can’t be changed, it’s part of a fixed template.

Thanks!

Answer 1

.od_article>p references all p tags that are immediate children of .od_article and therein lies your problem. You only want the first p tag. Change .od_article>p:first-letter to .od_article>p:first-of-type:first-letter as in the updated fiddle below.

http://jsfiddle.net/gB94x/1/

UPDATE:

I don’t believe IE7 supports the :first-of-type unfortunately. I’m not sure if it supports :first-child either but for reference, :first-child matches if the element it’s applied to is the first child of its parent.

I can’t think of a workaround off the top of my head but looking at the HTML the p you want to change the first letter for has the class CaptionPic1. If the first paragraph will always have this class, just use that, so .CaptionPic1:first-letter.