CSS :first-letter not working

Question

I'm trying to apply CSS styles to some HTML snippets that were generated from a Microsoft Word document. The HTML that Word generated is fairly atrocious, and includes a lot of inline styles. It goes something like this: ```

Title text goes here

Content text goes here.

``` ...and very simply, I would like to style the first letter of the title section. It just needs to be larger and in a different font. To do this I am trying to use the `:first-letter` selector, with something kind of like: ``` p b span:first-letter { font-size: 500px !important; } ``` But it doesn't seem to be working. Here's a fiddle demonstrati…

Accepted Answer

`::first-letter` does not work on inline elements such as a `span`. `::first-letter` works on block elements such as a paragraph, table caption, table cell, list item, or those with their `display` property set to `inline-block`.

Therefore it's better to apply `::first-letter` to a `p` instead of a `span`.

```
p::first-letter {font-size: 500px;}
```

or if you want a `::first-letter` selector in a `span` then write it like this:

```
p b span::first-letter {font-size: 500px !important;}
span {display:block}
```

MDN provides the rationale for this non-obvious behaviour:

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.

...

A first line has only meaning in a block-container box, therefore the `::first-letter` pseudo-element has only an effect on elements with a `display` value of `block`, `inline-block`, `table-cell`, `list-item` or `table-caption`. In all other cases, `::first-letter` has no effect.

Another odd case(apart from not working on inline items) is if you use `:before` the `:first-letter` will apply to the before not the actual first letter see codepen

Examples

- http://jsfiddle.net/sandeep/KvGr2/9/

- http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

References

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

CSS :first-letter not working

Solution

Problem