Question

Quite simply I need to make the first letter in a <p> be a different color but there is an image before that letter some of the time. Is there a way to make :first-letter apply to a non HTML tag?

CSS:

p:first-letter {
    color: red; // this should make the "W" red"
}

HTML:

<p><img src="will.jpg">West Philadelphia, Born And Raised</p>

Answer 1

It’s not possible with CSS. You need to change the HTML as suggested or do some javascript hack:

• find first-child img elements of paragraphs
• move them to the end of the paragraph
• apply style definitions on them to appear before the text