: first letter does not work with strong

Question

I give up. Why: the first letter does not work here?

strong { font-weight: bold; color: blue; } strong:first-letter { color: red; } <strong>test test</strong> 

Answer 1

In addition to the other answers, it also (at least in Chromium) works with elements with display: inline-block , so display just has to be something other than inline (including list-item ), for example:

 strong { font-weight: bold; color: blue; display: inline-block; } strong::first-letter { color: red; } 

JS Fiddle demo .

In addition, ::first-letter is a pseudo-element, so the syntax must be two-column, not single, to distinguish the selector from the pseudo-class.

Answer 2

first-letter does not work with inline elements, only on block elements.

Answer 3

first-letter can only be used with block elements.

This will work, but the question is how useful the strong block level is:

http://jsfiddle.net/UZpLG/

 strong { font-weight: bold; color: blue; display: block; } strong:first-letter { color: red; } <strong>test test</strong> 

Answer 4

Here is jsbin

: the first letter does not work with inline elements

Change your CSS with this, add display: block to your strong {...}

 strong { font-weight: bold; color: blue; display: block; } strong:first-letter { color: red; } 

Answer 5

You should read about Note: The "first letter" selector can only be used with block level elements.

and Block Level Elements

and example http://jsfiddle.net/eLvWt/6/

 strong { display:block; color:green; } strong:first-letter { color: red; } 

DISCLAIMER: Please ignore these my answers as they are outdated.