Is there a way to select the first character? :first-letter does not seem to work

css, css-selectors, html

Solution

Indeed, that's odd. Doesn't work for other symbol chars as well and the same problem has been discussed elsewhere on SO as well.

You should try something like this:

<p>hello world</p>
p:before { content:"%"; font-weight: bold; padding-right: 5px;}

​ Try it yourself…

Problem

Example problem: http://jsfiddle.net/6WYXk/ I have some html: `<p>% hello world</p>` I want to make the % bold. To do this usually I would write this in CSS: ``` p:first-letter { font-weight: bold; }​ ``` However that makes the % and the h bold. Ideally I'd like a psudeo selector of `:first-character`

Original source

Related problems