P:first Child Doesn't Work If A Img Tag Is Immediately After The P Tag?

Hy there, can't make it to work i have something like this .body-post p:first-child:first-letter { font-size:240%; } and here the html:

Copy

//Side note, try to avoid using inline styles when possible. It can interfere with JS and media queries/

Solution 2:

After a bit of research I found out that first-letter can only be used on block elements (which you were doing).

In this solution I increased the selectivity of the text by wrapping it in a span and put in the proper styling to make the span an inline-block

http://jsfiddle.net/52Vjm/1/

<div>
    <p>
        <img src="http://placekitten.com/100/100"/>
        <span>Kittens are great</span>
    </p>
</div>

span:first-letter { font-size:2em; }
span { display:inline-block; }
img { margin-right:5px; }

Share