Get :first-letter to ignore image?

Question

I’m trying to get :first-letter working when there is other elements there, is it possible?

I’ve created a jsfiddle to illustrate.

<h3 class="title"> 
 <img  src="/imgs/small-logo.png" width="31" height="30" />
 Test
 </h3>
 <h3 class="title"> 
 Test
 </h3>

Anyway using :first-of-type or something, but i cannot get it to ignore the img.

The only other way was to wrap the letter in a span and style, but i’m not keen on separating as when the screen collapses so does the rest of the word below..

Answer 1

If you are happy to adapt your mark-up you could wrap your whole string of text within a span.

HTML:

<h3 class="title"> 
     <img  src="/imgs/small-logo.png" width="31" height="30" />
     <span>Test</span>
 </h3>

<h3 class="title"> 
    <span>Test</span>
</h3>

CSS:

h3.title {
    color: #004265;
}
h3.title span {
    display: inline-block;
}
h3.title span:first-letter {
    color: red;
}

:first-letter only works on block level elements, hence setting the span to inline-block.

Here is the working code - JsFiddle

Answer 2

You could try changing the position of the image so it comes after the text and then use float: left on the image:

http://jsfiddle.net/chrissp26/mp4UH/1/

Answer 3

Have a look here on MDN

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

The only potential solution I can think of is to float the image so it escapes this rule, e.g.

h3.title img{
    float:left;
}

Fiddle